design page specialdays & workingdays & turns & add modal working day

2024-09-11 22:15:28 +03:30
parent d75e3c82b7
commit 55e32c63ae
23 changed files with 562 additions and 6 deletions
@@ -0,0 +1,36 @@
+import CloseModalD from "@/components/icons/CloseModalD"
+import { styleDefault } from "@/mui"
+import { Box, Button, Modal } from "@mui/material"
+import Radios from "./Radios"
+import Form from "./Form"
+
+function ContentModal({ open, setOpen, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box
+                sx={styleDefault}
+                className="!w-fit !py-[20px] !px-[16px] !pb-[56px]"
+            >
+                <div className="flex items-center justify-between">
+                    <p className="text-[#525252] text-[20px] font-bold">اضافه کردن روز کاری</p>
+                    <Button
+                        variant="text"
+                        className="!p-1"
+                        onClick={handleClose}
+                    >
+                        <CloseModalD />
+                    </Button>
+                </div>
+                <div className="mx-[52px]">
+                    <Radios />
+                    <Form />
+                </div>
+            </Box>
+        </Modal>
+    )
+}
+
+export default ContentModal
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import ClockP from "@/components/icons/ClockP";
+import FieldIcon from "@/app/component/FieldIcon";
+import ContentText from "@/components/panel/ContentText";
+import { Button } from "@mui/material";
+
+function Form() {
+
+    const [data, setData] = useState({
+        start_time: '',
+        end_time: ''
+    });
+
+    const changeData = (value, name) => setData({ ...data, [name]: value })
+
+    return (
+        <div className="flex flex-col gap-[40px] min-w-[420px]">
+            <ContentText text='زمان شروع'>
+                <FieldIcon
+                    placeholder='انتخاب کنید...'
+                    changeData={changeData}
+                    icon={<ClockP />}
+                    name='start_time'
+                />
+            </ContentText>
+            <ContentText text='زمان پایان'>
+                <FieldIcon
+                    placeholder='انتخاب کنید...'
+                    changeData={changeData}
+                    icon={<ClockP />}
+                    name='end_time'
+                />
+            </ContentText>
+            <div className="flex items-center justify-center gap-[16px]">
+                <Button
+                    variant="outlined"
+                    className="!border-[#5559CE] !shadow-none !px-[48px]"
+                >انصراف</Button>
+                <Button
+                    variant="contained"
+                    className=" !shadow-none !px-[48px]"
+                >ذخیره</Button>
+            </div>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,20 @@
+import AddTimeP from '@/components/icons/AddTimeP'
+import { Button } from '@mui/material'
+import React from 'react'
+
+function ModalAddTime({ handleOpen }) {
+    return (
+        <div>
+            <Button
+                variant='text'
+                onClick={handleOpen}
+                className='!gap-[8px] !p-1 !text-[#5559CE] !text-[16px] !font-medium'
+            >
+                <AddTimeP />
+                انتخاب کنید
+            </Button>
+        </div>
+    )
+}
+
+export default ModalAddTime
@@ -0,0 +1,21 @@
+import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
+
+function Radios() {
+    return (
+        <RadioGroup
+            dir="ltr"
+            className="!flex !flex-row !my-[40px] !gap-[36px] !items-center !justify-end"
+            defaultValue='workingDay'
+            sx={{
+                '& .muirtl-j204z7-MuiFormControlLabel-root': {
+                    marginLeft: '0 !important'
+                }
+            }}
+        >
+            <FormControlLabel value="workingDay" control={<Radio />} label="روز کاری" />
+            <FormControlLabel value="holiday" control={<Radio />} label="تعطیل" />
+        </RadioGroup>
+    )
+}
+
+export default Radios