check responsive & page dashboard user account & turns & transactions & comments

2024-09-03 03:04:55 +03:30
parent bb154ac63f
commit 13cc7796c3
55 changed files with 1887 additions and 92 deletions
@@ -0,0 +1,70 @@
+import CalendarEdit from '@/components/icons/CalendarEdit';
+import { convertToJalali } from '@/helper';
+import { Button, Popover } from '@mui/material'
+import { DatePicker } from 'jalaali-react-date-picker'
+import React, { useState } from 'react'
+
+function DateBirthday({ data, changeData }) {
+
+    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 (
+        <div className='w-full'>
+            <div
+                className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
+                onClick={handleClick}
+            >
+                <p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
+                <Button
+                    className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
+                >
+                    <CalendarEdit />
+                </Button>
+            </div>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                sx={{
+                    '& .MuiPaper-root': {
+                        padding: { xs: '12px 12px 0', sm: '24px 24px 0' },
+                        background: '#FFF',
+                        borderRadius: '16px',
+                        border: '1px solid #E9ECEF',
+                        boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
+                    },
+                }}
+            >
+                <DatePicker
+                    locale='fa'
+                    onChange={e => {
+                        changeData(convertToJalali(e._d), 'value', 'date_of_birth');
+                        handleClose();
+                    }}
+                />
+            </Popover>
+        </div>
+    )
+}
+
+export default DateBirthday