100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
import { useState } from 'react';
|
|
import { Button, Popover } from '@mui/material';
|
|
import ArrowBottomHD from '@/components/icons/ArrowBottomHD';
|
|
import ProfilePA from '@/components/icons/ProfilePA';
|
|
import LogoutP from '@/components/icons/LogoutP';
|
|
import SettingPA from '@/components/icons/SettingPA';
|
|
import CardDA from '@/components/icons/CardDA';
|
|
import Image from 'next/image';
|
|
|
|
function MenuProfile({ data }) {
|
|
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const handleClick = (event) => setAnchorEl(event.currentTarget);
|
|
const handleClose = () => setAnchorEl(null);
|
|
|
|
const open = Boolean(anchorEl);
|
|
const id = open ? 'simple-popover' : undefined;
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant='text'
|
|
onClick={handleClick}
|
|
className='!flex !items-start !justify-center !gap-[8px] !p-1'
|
|
>
|
|
<Image
|
|
className='w-[48px] h-[48px] rounded-full'
|
|
src={data.src}
|
|
alt='profile'
|
|
height={48}
|
|
width={48}
|
|
/>
|
|
<div className='flex flex-col items-start justify-between gap-[3px]'>
|
|
<p className='text-[#3B3B3B] text-[14px] font-semibold'>{data.name}</p>
|
|
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.expertise}</p>
|
|
</div>
|
|
<div className='mr-[4px]'>
|
|
<ArrowBottomHD />
|
|
</div>
|
|
</Button>
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
>
|
|
<div
|
|
className='flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]'
|
|
>
|
|
<Button
|
|
fullWidth
|
|
variant='text'
|
|
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
|
>
|
|
<ProfilePA />
|
|
پروفایل من
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
variant='text'
|
|
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
|
>
|
|
<CardDA />
|
|
پرداخت ها
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
variant='text'
|
|
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
|
>
|
|
<SettingPA />
|
|
تنظیمات
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
color='error'
|
|
variant='contained'
|
|
sx={{
|
|
'&.MuiButtonBase-root': {
|
|
paddingTop: '8px !important',
|
|
paddingBottom: '8px !important'
|
|
},
|
|
}}
|
|
className='!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]'
|
|
>
|
|
<LogoutP />
|
|
خروج
|
|
</Button>
|
|
</div>
|
|
</Popover>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MenuProfile |