106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Card from '@mui/material/Card';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import Chip from '@mui/material/Chip';
|
|
import Divider from '@mui/material/Divider';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import LinearProgress from '@mui/material/LinearProgress';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { PropertyItem } from '@/components/core/property-item';
|
|
import { PropertyList } from '@/components/core/property-list';
|
|
|
|
export default function BasicDetailCard({
|
|
lpCatId,
|
|
handleEditClick,
|
|
}: {
|
|
lpCatId: string;
|
|
handleEditClick: () => void;
|
|
}): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
action={
|
|
<IconButton
|
|
onClick={() => {
|
|
handleEditClick();
|
|
}}
|
|
>
|
|
<PencilSimpleIcon />
|
|
</IconButton>
|
|
}
|
|
avatar={
|
|
<Avatar>
|
|
<UserIcon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
}
|
|
title={t('list.basic-details')}
|
|
/>
|
|
<PropertyList
|
|
divider={<Divider />}
|
|
orientation="vertical"
|
|
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
|
>
|
|
{(
|
|
[
|
|
{
|
|
key: 'Customer ID',
|
|
value: (
|
|
<Chip
|
|
label="USR-001"
|
|
size="small"
|
|
variant="soft"
|
|
/>
|
|
),
|
|
},
|
|
{ key: 'Name', value: 'Miron Vitold' },
|
|
{ key: 'Email', value: 'miron.vitold@domain.com' },
|
|
{ key: 'Phone', value: '(425) 434-5535' },
|
|
{ key: 'Company', value: 'Devias IO' },
|
|
{
|
|
key: 'Quota',
|
|
value: (
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'center' }}
|
|
>
|
|
<LinearProgress
|
|
sx={{ flex: '1 1 auto' }}
|
|
value={50}
|
|
variant="determinate"
|
|
/>
|
|
<Typography
|
|
color="text.secondary"
|
|
variant="body2"
|
|
>
|
|
50%
|
|
</Typography>
|
|
</Stack>
|
|
),
|
|
},
|
|
] satisfies { key: string; value: React.ReactNode }[]
|
|
).map(
|
|
(item): React.JSX.Element => (
|
|
<PropertyItem
|
|
key={item.key}
|
|
name={item.key}
|
|
value={item.value}
|
|
/>
|
|
)
|
|
)}
|
|
</PropertyList>
|
|
</Card>
|
|
);
|
|
}
|