81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
'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>
|
|
</>
|
|
);
|
|
}
|