67 lines
1.8 KiB
TypeScript
67 lines
1.8 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';
|
|
|
|
export default function SampleTitleCard(): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
|
>
|
|
<Avatar
|
|
src="/assets/avatar-1.png"
|
|
sx={{ '--Avatar-size': '64px' }}
|
|
>
|
|
empty
|
|
</Avatar>
|
|
<div>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
|
>
|
|
<Typography variant="h4">{t('list.customer-name')}</Typography>
|
|
<Chip
|
|
icon={
|
|
<CheckCircleIcon
|
|
color="var(--mui-palette-success-main)"
|
|
weight="fill"
|
|
/>
|
|
}
|
|
label={t('list.active')}
|
|
size="small"
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
<Typography
|
|
color="text.secondary"
|
|
variant="body1"
|
|
>
|
|
{t('list.customer-email')}
|
|
</Typography>
|
|
</div>
|
|
</Stack>
|
|
<div>
|
|
<Button
|
|
endIcon={<CaretDownIcon />}
|
|
variant="contained"
|
|
>
|
|
{t('list.action')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|