51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import { useState } from "react";
|
|
import { Button } from "@mui/material";
|
|
import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
|
|
import Image from "next/image";
|
|
import DetailProfile from "@/app/component/DetailProfile";
|
|
|
|
function MenuProfile({ data }) {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const handleClick = (event) => setAnchorEl(event.currentTarget);
|
|
|
|
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-[#D7D8ED] text-[14px] font-semibold">
|
|
دکتر {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>
|
|
<DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MenuProfile;
|