design page general and office information & head panel

2024-09-11 04:17:39 +03:30
parent 62b355e52f
commit d75e3c82b7
33 changed files with 588 additions and 37 deletions
@@ -0,0 +1,100 @@
+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