64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { Person } from '@mui/icons-material';
|
|
import { Avatar, Box, Button, Card, CardActions, CardContent, Divider, Grid, Typography } from '@mui/material';
|
|
import { FC, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { User } from '../../types/User';
|
|
import convertDate from '../../utils/date';
|
|
import UserEditDialog from '../Dialogs/UserEdit/UserEditDialog';
|
|
|
|
interface Props {
|
|
user: User;
|
|
canEdit?: boolean;
|
|
}
|
|
|
|
const Profile: FC<Props> = ({ user, canEdit }) => {
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Grid container sx={{ justifyContent: 'center' }} spacing={2}>
|
|
<Grid item>
|
|
<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" onClick={() => setEditOpen(true)}>
|
|
{t('Edit')}
|
|
</Button>
|
|
)}
|
|
</CardActions>
|
|
<UserEditDialog user={user} open={editOpen} onClose={() => setEditOpen(false)} />
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Divider variant="middle">
|
|
<Typography sx={{ opacity: 0.36 }}>{t('Recent posts')}</Typography>
|
|
</Divider>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|