120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import type { CardProps } from '@mui/material/Card';
|
|
import Card from '@mui/material/Card';
|
|
import Divider from '@mui/material/Divider';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import { varAlpha } from 'minimal-shared/utils';
|
|
import { _socials } from 'src/_mock';
|
|
import { AvatarShape } from 'src/assets/illustrations';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { Image } from 'src/components/image';
|
|
import type { IPartyUserCard } from 'src/types/party-user';
|
|
import { fShortenNumber } from 'src/utils/format-number';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = CardProps & {
|
|
user: IPartyUserCard;
|
|
};
|
|
|
|
export function UserCard({ user, sx, ...other }: Props) {
|
|
return (
|
|
<Card sx={[{ textAlign: 'center' }, ...(Array.isArray(sx) ? sx : [sx])]} {...other}>
|
|
<Box sx={{ position: 'relative' }}>
|
|
<AvatarShape
|
|
sx={{
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 10,
|
|
mx: 'auto',
|
|
bottom: -26,
|
|
position: 'absolute',
|
|
}}
|
|
/>
|
|
|
|
<Avatar
|
|
alt={user.name}
|
|
src={user.avatarUrl}
|
|
sx={{
|
|
left: 0,
|
|
right: 0,
|
|
width: 64,
|
|
height: 64,
|
|
zIndex: 11,
|
|
mx: 'auto',
|
|
bottom: -32,
|
|
position: 'absolute',
|
|
}}
|
|
/>
|
|
|
|
<Image
|
|
src={user.coverUrl}
|
|
alt={user.coverUrl}
|
|
ratio="16/9"
|
|
slotProps={{
|
|
overlay: {
|
|
sx: (theme) => ({
|
|
bgcolor: varAlpha(theme.vars.palette.common.blackChannel, 0.48),
|
|
}),
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<ListItemText
|
|
sx={{ mt: 7, mb: 1 }}
|
|
primary={user.name}
|
|
secondary={user.role}
|
|
slotProps={{
|
|
primary: { sx: { typography: 'subtitle1' } },
|
|
secondary: { sx: { mt: 0.5 } },
|
|
}}
|
|
/>
|
|
|
|
<Box
|
|
sx={{
|
|
mb: 2.5,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{_socials.map((social) => (
|
|
<IconButton key={social.label}>
|
|
{social.value === 'twitter' && <Iconify icon="socials:twitter" />}
|
|
{social.value === 'facebook' && <Iconify icon="socials:facebook" />}
|
|
{social.value === 'instagram' && <Iconify icon="socials:instagram" />}
|
|
{social.value === 'linkedin' && <Iconify icon="socials:linkedin" />}
|
|
</IconButton>
|
|
))}
|
|
</Box>
|
|
|
|
<Divider sx={{ borderStyle: 'dashed' }} />
|
|
|
|
<Box
|
|
sx={{
|
|
py: 3,
|
|
display: 'grid',
|
|
typography: 'subtitle1',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
}}
|
|
>
|
|
{[
|
|
{ label: 'Follower', value: user.totalFollowers },
|
|
{ label: 'Following', value: user.totalFollowing },
|
|
{ label: 'Total post', value: user.totalPosts },
|
|
].map((stat) => (
|
|
<Box key={stat.label} sx={{ gap: 0.5, display: 'flex', flexDirection: 'column' }}>
|
|
<Box component="span" sx={{ typography: 'caption', color: 'text.secondary' }}>
|
|
{stat.label}
|
|
</Box>
|
|
{fShortenNumber(stat.value)}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|