45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { Person } from '@mui/icons-material';
|
|
import { Avatar, Box, Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material';
|
|
import { FC } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { User } from '../../types/User';
|
|
import convertDate from '../../utils/date';
|
|
|
|
interface Props {
|
|
user: User;
|
|
canEdit?: boolean;
|
|
}
|
|
|
|
const Profile: FC<Props> = ({ user, canEdit }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Grid container spacing={2}>
|
|
<Grid item sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center' }}>
|
|
<Avatar alt={user.username} src={`storage/${user.image}`} sx={{ width: '100px', height: '100px' }}>
|
|
<Person sx={{ width: '60px', height: '60px' }} />
|
|
</Avatar>
|
|
</Grid>
|
|
<Grid item sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', columnGap: 1 }}>
|
|
<Typography fontWeight="bold">{t('Username')}:</Typography>
|
|
<Typography>{user.username}</Typography>
|
|
<Typography fontWeight="bold">{t('Email')}:</Typography>
|
|
<Typography>{user.email}</Typography>
|
|
<Typography fontWeight="bold">{t('Member since')}:</Typography>
|
|
<Typography>{convertDate(user.memberSince)}</Typography>
|
|
<Typography fontWeight="bold">{t('Post count')}:</Typography>
|
|
<Typography>{user.postCount}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
<CardActions>{canEdit && <Button size="small">{t('Edit')}</Button>}</CardActions>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|