110 lines
3.3 KiB
JavaScript
110 lines
3.3 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 (
|
|
<>
|
|
<Image
|
|
className="flex md:hidden w-[32px] h-[32px] rounded-full"
|
|
src={data.src}
|
|
alt="profile"
|
|
height={32}
|
|
width={32}
|
|
/>
|
|
<Button
|
|
variant="text"
|
|
onClick={handleClick}
|
|
className="!hidden md:!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] dark:text-[#FAFAFA] text-[14px] font-semibold dark:text-[]">
|
|
{data.name}
|
|
</p>
|
|
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] 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"
|
|
onClick={handleClose}
|
|
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;
|