update,
This commit is contained in:
louiscklaw
@@ -1,138 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import Avatar from '@mui/material/Avatar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import Card from '@mui/material/Card';
|
|
||||||
import CardActions from '@mui/material/CardActions';
|
|
||||||
import CardContent from '@mui/material/CardContent';
|
|
||||||
import CardHeader from '@mui/material/CardHeader';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
import InputAdornment from '@mui/material/InputAdornment';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
|
|
||||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
|
||||||
|
|
||||||
import { Option } from '@/components/core/option';
|
|
||||||
|
|
||||||
export function AccountDetails(): React.JSX.Element {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Basic details"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: '1px dashed var(--mui-palette-divider)',
|
|
||||||
borderRadius: '50%',
|
|
||||||
display: 'inline-flex',
|
|
||||||
p: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ borderRadius: 'inherit', position: 'relative' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
alignItems: 'center',
|
|
||||||
bgcolor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
borderRadius: 'inherit',
|
|
||||||
bottom: 0,
|
|
||||||
color: 'var(--mui-palette-common-white)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
left: 0,
|
|
||||||
opacity: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
zIndex: 1,
|
|
||||||
'&:hover': { opacity: 1 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
||||||
<CameraIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
<Typography color="inherit" variant="subtitle2">
|
|
||||||
Select
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
<Avatar src="/assets/avatar.png" sx={{ '--Avatar-size': '100px' }} />
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
<Button color="secondary" size="small">
|
|
||||||
Remove
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
<Stack spacing={2}>
|
|
||||||
<FormControl>
|
|
||||||
<InputLabel>Full name</InputLabel>
|
|
||||||
<OutlinedInput defaultValue="Sofia Rivers" name="fullName" />
|
|
||||||
</FormControl>
|
|
||||||
<FormControl disabled>
|
|
||||||
<InputLabel>Email address</InputLabel>
|
|
||||||
<OutlinedInput name="email" type="email" value="sofia@devias.io" />
|
|
||||||
<FormHelperText>
|
|
||||||
Please <Link variant="inherit">contact us</Link> to change your email
|
|
||||||
</FormHelperText>
|
|
||||||
</FormControl>
|
|
||||||
<Stack direction="row" spacing={2}>
|
|
||||||
<FormControl sx={{ width: '160px' }}>
|
|
||||||
<InputLabel>Dial code</InputLabel>
|
|
||||||
<Select
|
|
||||||
name="countryCode"
|
|
||||||
startAdornment={
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<Box
|
|
||||||
alt="Spain"
|
|
||||||
component="img"
|
|
||||||
src="/assets/flag-es.svg"
|
|
||||||
sx={{ display: 'block', height: '20px', width: 'auto' }}
|
|
||||||
/>
|
|
||||||
</InputAdornment>
|
|
||||||
}
|
|
||||||
value="+34"
|
|
||||||
>
|
|
||||||
<Option value="+1">United States</Option>
|
|
||||||
<Option value="+49">Germany</Option>
|
|
||||||
<Option value="+34">Spain</Option>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<FormControl sx={{ flex: '1 1 auto' }}>
|
|
||||||
<InputLabel>Phone number</InputLabel>
|
|
||||||
<OutlinedInput defaultValue="965 245 7623" name="phone" />
|
|
||||||
</FormControl>
|
|
||||||
</Stack>
|
|
||||||
<FormControl>
|
|
||||||
<InputLabel>Title</InputLabel>
|
|
||||||
<OutlinedInput name="title" placeholder="e.g Golang Developer" />
|
|
||||||
</FormControl>
|
|
||||||
<FormControl>
|
|
||||||
<InputLabel>Biography (optional)</InputLabel>
|
|
||||||
<OutlinedInput name="bio" placeholder="Describe yourself..." />
|
|
||||||
<FormHelperText>0/200 characters</FormHelperText>
|
|
||||||
</FormControl>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary">Cancel</Button>
|
|
||||||
<Button variant="contained">Save changes</Button>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -20,11 +20,17 @@ export function DeleteAccount(): React.JSX.Element {
|
|||||||
title="Delete account"
|
title="Delete account"
|
||||||
/>
|
/>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Stack spacing={3} sx={{ alignItems: 'flex-start' }}>
|
<Stack
|
||||||
|
spacing={3}
|
||||||
|
sx={{ alignItems: 'flex-start' }}
|
||||||
|
>
|
||||||
<Typography variant="subtitle1">
|
<Typography variant="subtitle1">
|
||||||
Delete your account and all of your source data. This is irreversible.
|
Delete your account and all of your source data. This is irreversible.
|
||||||
</Typography>
|
</Typography>
|
||||||
<Button color="error" variant="outlined">
|
<Button
|
||||||
|
color="error"
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
Delete account
|
Delete account
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
Reference in New Issue
Block a user