design dark mode turns & add-doctor & account & layout and components MUI

2024-10-01 19:05:36 +03:30
parent 124b25f87c
commit c29c787f09
19 changed files with 361 additions and 85 deletions
@@ -0,0 +1,39 @@
+import { Popover } from "@mui/material";
+import DatePickerContent from "./DatePickerContent";
+
+function ButtonDate({ anchorEl, setAnchorEl, open, id, updateDate, children }) {
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      {children}
+      <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: "8px",
+            border: "1px solid #EFEFEF",
+            boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
+          },
+        }}
+      >
+        <DatePickerContent updateDate={updateDate} handleClose={handleClose} />
+      </Popover>
+    </>
+  );
+}
+
+export default ButtonDate;
@@ -0,0 +1,37 @@
+import { DatePicker } from "jalaali-react-date-picker";
+
+function DatePickerContent({ type, updateDate, handleClose }) {
+  return (
+    <DatePicker
+      dayLabelRender={(e) => (
+        <div className="day-label-bar-inner-rtl">
+          <div className="day-label-item !text-[10px] font-semibold">شنبه</div>
+          <div className="day-label-item !text-[10px] font-semibold">
+            ۱ شنبه
+          </div>
+          <div className="day-label-item !text-[10px] font-semibold">
+            ۲ شنبه
+          </div>
+          <div className="day-label-item !text-[10px] font-semibold">
+            ۳ شنبه
+          </div>
+          <div className="day-label-item !text-[10px] font-semibold">
+            ۴ شنبه
+          </div>
+          <div className="day-label-item !text-[10px] font-semibold">
+            ۵ شنبه
+          </div>
+          <div className="day-label-item !text-[10px] font-semibold">جمعه</div>
+        </div>
+      )}
+      onChange={(e) => {
+        if (e._d) {
+          updateDate && updateDate(e._d, type);
+        }
+        handleClose && handleClose();
+      }}
+    />
+  );
+}
+
+export default DatePickerContent;
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Button, Popover } from "@mui/material";
+import DatePickerContent from "./DatePickerContent";
+
+function PopoverDate({ text, updateDate, type }) {
+  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>
+      <Button
+        onClick={handleClick}
+        className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] 
+        dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
+      >
+        {text}
+      </Button>
+      <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: "8px",
+            border: "1px solid #EFEFEF",
+            boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
+          },
+        }}
+      >
+        <DatePickerContent
+          type={type}
+          updateDate={updateDate}
+          handleClose={handleClose}
+        />
+      </Popover>
+    </div>
+  );
+}
+
+export default PopoverDate;
@@ -70,7 +70,7 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
          }}
        />
        <p
-          className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+          className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
                w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
        >
@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+
+function UploadFile({ fileRef, openInput }) {
+  return (
+    <>
+      <input className="contents" ref={fileRef} type="file" />
+      <div
+        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+        onClick={openInput}
+      >
+        <ProfileP />
+      </div>
+      <Button
+        variant="text"
+        onClick={openInput}
+        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+      >
+        انتخاب تصویر
+        <ArrowLeftPU />
+      </Button>
+    </>
+  );
+}
+
+export default UploadFile;