77 lines
2.2 KiB
TypeScript
77 lines
2.2 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 type { Student } from '@/components/dashboard/student/type.d';
|
|
|
|
// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
|
|
|
function getImageUrlFrRecord(record: Student): string {
|
|
// TODO: fix this
|
|
// `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
|
|
return 'getImageUrlFrRecord(helloworld)';
|
|
}
|
|
|
|
export default function SampleTitleCard({ lpModel }: { lpModel: Student }): 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>
|
|
</>
|
|
);
|
|
}
|