You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
53 lines
1.2 KiB
import { |
|
Drawer, |
|
Button, |
|
IconButton, |
|
Toolbar, |
|
Box, |
|
TextField, |
|
Divider, |
|
Stack, |
|
} from '@mui/material'; |
|
import { useAuth } from '../Contexts/AuthContext'; |
|
import { useSnackbar } from '../Contexts/SnackbarContext'; |
|
import CloseIcon from '@mui/icons-material/Close'; |
|
|
|
export const UserProfile = ({ showDrawer, toggleDrawer }) => { |
|
const { user, signOut } = useAuth(); |
|
const { showSnackBar } = useSnackbar(); |
|
|
|
const handleSignOut = (e) => { |
|
e.preventDefault(); |
|
signOut(); |
|
showSnackBar('info', 'user logged out'); |
|
}; |
|
|
|
return ( |
|
<Drawer |
|
PaperProps={{ |
|
sx: { |
|
// width: 1 |
|
width: 350, |
|
}, |
|
}} |
|
anchor="right" |
|
open={showDrawer} |
|
onClose={toggleDrawer()} |
|
> |
|
<Toolbar sx={{ flexDirection: 'row' }}> |
|
<Box sx={{ flexGrow: 1 }}>user profile</Box> |
|
<IconButton onClick={toggleDrawer()}> |
|
<CloseIcon /> |
|
</IconButton> |
|
</Toolbar> |
|
<Divider /> |
|
<Stack m={2} spacing={1}> |
|
<TextField fullWidth label="email" value={user.email} /> |
|
|
|
<Button fullWidth onClick={(e) => handleSignOut(e)}> |
|
signout |
|
</Button> |
|
</Stack> |
|
</Drawer> |
|
); |
|
};
|
|
|