design and responsive page doctor and account

2024-08-30 11:59:53 +03:30
parent 707206450c
commit 451ae76cb1
15 changed files with 251 additions and 42 deletions
@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from "react";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal, Rating, TextField } from "@mui/material";
+import CloseModalD from "@/components/icons/CloseModalD";
+import ProgressDetail from "@/app/component/ProfressDetail";
+import Field from "@/app/component/Field";
+
+function ModalAnswer({ doctor }) {
+
+    const [open, setOpen] = useState(true);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <>
+            <Button
+                variant='outlined'
+                onClick={handleOpen}
+                className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full'
+            >ثبت نظر</Button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box
+                    sx={styleDefault}
+                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
+                >
+                    <div className="w-full flex justify-end">
+                        <CloseModalD />
+                    </div>
+                    <p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
+                    <Rating
+                        className="!my-[24px]"
+                        sx={{
+                            '& .MuiSvgIcon-root': {
+                                width: '12px',
+                                height: '12px'
+                            }
+                        }}
+                    />
+                    <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
+                        {doctor.progress_detail.map((item, idx) => (
+                            <ProgressDetail
+                                data={item}
+                                key={idx}
+                            />
+                        ))}
+                    </ul>
+                    <div className="flex flex-col justify-center items-start mt-[24px]">
+                        <p className='text-[#495057] text-[16px] font-bold'>متن نظر</p>
+                        <Field
+                            type='number'
+                            multiline={true}
+                            title='نظر خود را بنویسید...'
+                        />
+                    </div>
+                </Box>
+            </Modal>
+        </>
+    )
+}
+
+export default ModalAnswer