refactor to dedicated directory,

002_source/cms/src/app/dashboard/Sample/PaymentCard/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Divider from '@mui/material/Divider';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { Payments } from '@/components/dashboard/lp/categories/payments';
+
+import { SamplePayments } from './SamplePayments';
+
+export default function SamplePaymentCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Payments
+        ordersValue={2069.48}
+        payments={SamplePayments}
+        refundsValue={324.5}
+        totalOrders={5}
+      />
+      <Card>
+        <CardHeader
+          action={
+            <Button
+              color="secondary"
+              startIcon={<PencilSimpleIcon />}
+            >
+              {t('list.edit')}
+            </Button>
+          }
+          avatar={
+            <Avatar>
+              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title={t('list.billing-details')}
+        />
+        <CardContent>
+          <Card
+            sx={{ borderRadius: 1 }}
+            variant="outlined"
+          >
+            <PropertyList
+              divider={<Divider />}
+              sx={{ '--PropertyItem-padding': '16px' }}
+            >
+              {(
+                [
+                  { key: t('Credit card'), value: '**** 4142' },
+                  { key: t('Country'), value: t('United States') },
+                  { key: t('State'), value: t('Michigan') },
+                  { key: t('City'), value: t('Southfield') },
+                  { key: t('Address'), value: t('Address') },
+                  { key: t('Tax ID'), value: t('Tax ID') },
+                ] satisfies { key: string; value: React.ReactNode }[]
+              ).map(
+                (item): React.JSX.Element => (
+                  <PropertyItem
+                    key={item.key}
+                    name={item.key}
+                    value={item.value}
+                  />
+                )
+              )}
+            </PropertyList>
+          </Card>
+        </CardContent>
+      </Card>
+    </>
+  );
+}