75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Button } from '@mui/material';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Chip from '@mui/material/Chip';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
|
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Customer } from '@/components/dashboard/customer/type.d';
|
|
|
|
// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
|
|
|
function getImageUrlFrRecord(record: Customer): string {
|
|
return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
|
|
}
|
|
|
|
export default function SampleTitleCard({ lpModel }: { lpModel: Customer }): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
|
>
|
|
<Avatar
|
|
variant="rounded"
|
|
src={getImageUrlFrRecord(lpModel)}
|
|
sx={{ '--Avatar-size': '64px' }}
|
|
>
|
|
{t('empty')}
|
|
</Avatar>
|
|
<div>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
|
>
|
|
<Typography variant="h4">{lpModel.email}</Typography>
|
|
<Chip
|
|
icon={
|
|
<CheckCircleIcon
|
|
color="var(--mui-palette-success-main)"
|
|
weight="fill"
|
|
/>
|
|
}
|
|
label={lpModel.quota}
|
|
size="small"
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
<Typography
|
|
color="text.secondary"
|
|
variant="body1"
|
|
>
|
|
{lpModel.status}
|
|
</Typography>
|
|
</div>
|
|
</Stack>
|
|
<div>
|
|
<Button
|
|
endIcon={<CaretDownIcon />}
|
|
variant="contained"
|
|
>
|
|
{t('list.action')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|