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

app/component/ButtonDate.js

@@ -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;

app/component/DatePickerContent.js

@@ -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;

app/component/PopoverDate.js

@@ -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;

app/component/TimePickerField.js

@@ -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)]"}`}
         >

app/component/UploadFile.js

@@ -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;

app/globals.css

@@ -583,6 +583,24 @@ html {
   color: #a1a1a1 !important;
 }
 
+.dark .MuiOutlinedInput-notchedOutline {
+  border-color: #343645 !important;
+}
+
+.dark
+  .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
+  background: #1f1d2b;
+  height: 50px;
+  border-radius: 10px;
+}
+
+.dark
+  .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
+  background: #222433;
+  height: 50px;
+  border-radius: 20px;
+}
+
 /* End Of Dark Style */
 
 /* Dark Date Picker */
@@ -642,6 +660,28 @@ html {
   color: #fafafa;
 }
 
+.panel-jalaali {
+  width: 464px !important;
+}
+
+.day-label-bar,
+.panel-header-inner,
+.days-body {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+.years-body-rtl,
+.months-body-rtl {
+  min-width: 100%;
+  grid-template-columns: repeat(3, minmax(33.33%, 100px)) !important;
+}
+
+.days-body {
+  width: 100%;
+  grid-template-columns: repeat(7, minmax(14.28%, 38px)) !important;
+}
+
 /* End Of Dark Date Picker */
 
 /* End Date Picker Style */
@@ -670,11 +710,6 @@ html {
   -webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
 }
 
-.dark .MuiPaper-root {
-  background: #1f1d2b !important;
-  box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important;
-}
-
 .dark .MuiTabs-scroller,
 .dark .MuiTabs-flexContainer {
   border-bottom-color: #343645 !important;

components/icons/CloseModalD.js

@@ -9,6 +9,7 @@ function CloseModalD() {
     >
       <path
         d="M12.5947 4.20135C12.533 4.13954 12.4597 4.09051 12.3791 4.05706C12.2984 4.0236 12.212 4.00638 12.1247 4.00638C12.0374 4.00638 11.9509 4.0236 11.8703 4.05706C11.7896 4.09051 11.7164 4.13954 11.6547 4.20135L8.39468 7.45468L5.13468 4.19468C5.07296 4.13296 4.99969 4.084 4.91904 4.0506C4.8384 4.01719 4.75197 4 4.66468 4C4.57739 4 4.49096 4.01719 4.41032 4.0506C4.32968 4.084 4.2564 4.13296 4.19468 4.19468C4.13296 4.2564 4.084 4.32968 4.0506 4.41032C4.01719 4.49096 4 4.57739 4 4.66468C4 4.75197 4.01719 4.8384 4.0506 4.91904C4.084 4.99969 4.13296 5.07296 4.19468 5.13468L7.45468 8.39468L4.19468 11.6547C4.13296 11.7164 4.084 11.7897 4.0506 11.8703C4.01719 11.951 4 12.0374 4 12.1247C4 12.212 4.01719 12.2984 4.0506 12.379C4.084 12.4597 4.13296 12.533 4.19468 12.5947C4.2564 12.6564 4.32968 12.7054 4.41032 12.7388C4.49096 12.7722 4.57739 12.7894 4.66468 12.7894C4.75197 12.7894 4.8384 12.7722 4.91904 12.7388C4.99969 12.7054 5.07296 12.6564 5.13468 12.5947L8.39468 9.33468L11.6547 12.5947C11.7164 12.6564 11.7897 12.7054 11.8703 12.7388C11.951 12.7722 12.0374 12.7894 12.1247 12.7894C12.212 12.7894 12.2984 12.7722 12.379 12.7388C12.4597 12.7054 12.533 12.6564 12.5947 12.5947C12.6564 12.533 12.7054 12.4597 12.7388 12.379C12.7722 12.2984 12.7894 12.212 12.7894 12.1247C12.7894 12.0374 12.7722 11.951 12.7388 11.8703C12.7054 11.7897 12.6564 11.7164 12.5947 11.6547L9.33468 8.39468L12.5947 5.13468C12.848 4.88135 12.848 4.45468 12.5947 4.20135Z"
+        className="fill-[#7E7E7E] dark:fill-[#FAFAFA]"
         fill="#7E7E7E"
       />
     </svg>

components/icons/Sun.js

@@ -0,0 +1,28 @@
+function Sun() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z"
+        stroke="#A1A1A1"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z"
+        stroke="#A1A1A1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Sun;

components/layoutPanel/header/MenuProfile.js

@@ -38,8 +38,8 @@ function MenuProfile({ data }) {
           width={48}
         />
         <div className="flex flex-col items-start justify-between gap-[3px]">
-          <p className="text-[#3B3B3B] dark:text-[#FAFAFA] text-[14px] font-semibold dark:text-[]">
+          <p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[14px] font-semibold">
-            {data.name}
+            دکتر {data.name}
           </p>
           <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
             {data.expertise}

components/layoutPanel/header/icons/Theme.js

@@ -1,4 +1,5 @@
 import MoonP from "@/components/icons/MoonP";
+import Sun from "@/components/icons/Sun";
 import { Button } from "@mui/material";
 import { useTheme } from "next-themes";
 import { useState } from "react";
@@ -22,7 +23,7 @@ function Theme() {
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       variant="outlined"
     >
-      <MoonP />
+      {theme === "light" ? <MoonP /> : <Sun />}
     </Button>
   );
 }

components/panel/addDoctor/listMenu/generalInformation/Head.js

@@ -1,9 +1,5 @@
-"use client";
+import UploadFile from "@/app/component/UploadFile";
-
 import { useRef } from "react";
-import { Button } from "@mui/material";
-import ProfileP from "@/components/icons/ProfileP";
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
   const fileRef = useRef();
@@ -12,21 +8,7 @@ function Head() {
 
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <input className="contents" ref={fileRef} type="file" />
+      <UploadFile fileRef={fileRef} openInput={openInput} />
-      <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>
     </div>
   );
 }

components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js

@@ -0,0 +1,54 @@
+import { useState } from "react";
+
+import { convertToJalali } from "@/helper";
+import EditField from "@/app/component/EditField";
+import ButtonDate from "@/app/component/ButtonDate";
+import CalendarPD from "@/components/icons/CalendarPD";
+import ContentText from "@/components/panel/ContentText";
+
+function FieldDate({ changeListData, data }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  const updateDate = (newDate) => {
+    const jalaliDate = newDate
+      ? convertToJalali(newDate)
+      : "تاریخ مد نظر پیدا نشد...";
+    changeListData(jalaliDate, "value", "time_work");
+  };
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <ContentText text="زمان شروع به کار">
+      <ButtonDate
+        setAnchorEl={setAnchorEl}
+        updateDate={updateDate}
+        anchorEl={anchorEl}
+        open={open}
+        id={id}
+      >
+        <div className="relative w-full">
+          <EditField
+            placeholder="انتخاب کنید..."
+            changeData={changeListData}
+            data={data}
+            icon={<CalendarPD />}
+            isTransparent={true}
+            iconGray={true}
+            name="time_work"
+          />
+          <span
+            className="absolute left-0 top-0 w-full h-full bg-transparent z-10 cursor-pointer"
+            onClick={handleClick}
+          ></span>
+        </div>
+      </ButtonDate>
+    </ContentText>
+  );
+}
+
+export default FieldDate;

components/panel/addDoctor/listMenu/generalInformation/form/Form.js

@@ -3,10 +3,10 @@ import ContentText from "@/components/panel/ContentText";
 import EditField from "@/app/component/EditField";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { degree } from "./listSelector";
-import CalendarPD from "@/components/icons/CalendarPD";
 import RadioGender from "./RadioGender";
 import { Button } from "@mui/material";
 import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
+import FieldDate from "./FieldDate";
 
 function Form() {
   const [data, setData] = useState({
@@ -95,17 +95,7 @@ function Form() {
         <ContentText text="جنسیت">
           <RadioGender />
         </ContentText>
-        <ContentText text="زمان شروع به کار">
+        <FieldDate changeListData={changeData} data={data?.time_work} />
-          <EditField
-            icon={<CalendarPD />}
-            isTransparent={true}
-            placeholder="انتخاب کنید..."
-            iconGray={true}
-            changeData={changeData}
-            data={data?.time_work}
-            name="time_work"
-          />
-        </ContentText>
       </div>
       <div className="mt-[40px] w-full flex justify-end">
         <Button

components/panel/addDoctor/listMenu/workingDays/List.js

@@ -45,19 +45,19 @@ function List() {
           <TableHead className="!py-2">
             <TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
               <TableCell
-                className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
+                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                 align="left"
               >
                 روز های هفته
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
+                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم صبح
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
+                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم عصر
@@ -78,7 +78,7 @@ function List() {
                   {row.name}
                 </TableCell>
                 <TableCell
-                  className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
+                  className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
                   align="right"
                 >
                   {row.morning_time[0] || row.morning_time[1] ? (
@@ -90,7 +90,7 @@ function List() {
                           idx,
                         });
                       }}
-                      className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                      className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                     >
                       {`${row.morning_time[0]} - ${row.morning_time[1]}`}
                       <EditOrangeAD />
@@ -106,7 +106,7 @@ function List() {
                   )}
                 </TableCell>
                 <TableCell
-                  className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
+                  className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
                   align="right"
                 >
                   {row.evening_time[0] || row.evening_time[1] ? (
@@ -118,7 +118,7 @@ function List() {
                           idx,
                         });
                       }}
-                      className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                      className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                     >
                       {`${row.evening_time[0]} - ${row.evening_time[1]}`}
                       <EditOrangeAD />

components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js

@@ -21,10 +21,11 @@ function ContentModal({
     <Modal open={open} onClose={handleClose}>
       <Box
         sx={styleDefault}
-        className="!w-full !rounded-none md:!rounded-[8px] md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
+        className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B] 
+        md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
       >
         <div className="flex items-center justify-between">
-          <p className="text-[#525252] text-[20px] font-bold">
+          <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
             اضافه کردن روز کاری
           </p>
           <Button variant="text" className="!p-1" onClick={handleClose}>

components/panel/addDoctor/listMenu/workingDays/modal/Radios.js

@@ -13,8 +13,18 @@ function Radios({ value, handleChange }) {
         },
       }}
     >
-      <FormControlLabel value={0} control={<Radio />} label="روز کاری" />
+      <FormControlLabel
-      <FormControlLabel value={1} control={<Radio />} label="تعطیل" />
+        className="!text-[#A1A1A1]"
+        value={0}
+        control={<Radio />}
+        label="روز کاری"
+      />
+      <FormControlLabel
+        className="!text-[#A1A1A1]"
+        value={1}
+        control={<Radio />}
+        label="تعطیل"
+      />
     </RadioGroup>
   );
 }

components/panel/turns/head/Date.js

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from "@mui/material";
+import FilterDate from "./FilterDate";
 
 function Date() {
   return (
@@ -6,20 +6,7 @@ function Date() {
       <p className="text-[#616161] text-[14px] font-normal md:hidden dark:text-[#a1a1a1]">
         انتخاب بازه زمانی
       </p>
-      <ButtonGroup variant="outlined">
+      <FilterDate />
-        <Button
-          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]"
-        >
-          از تاریخ
-        </Button>
-        <Button
-          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]"
-        >
-          تا تاریخ
-        </Button>
-      </ButtonGroup>
     </div>
   );
 }

components/panel/turns/head/FilterDate.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { convertToJalali } from "@/helper";
+import { ButtonGroup } from "@mui/material";
+import PopoverDate from "@/app/component/PopoverDate";
+
+function FilterDate() {
+  const [date, setDate] = useState({
+    start: null,
+    end: null,
+  });
+
+  const updateDate = (newDate, type) => {
+    setDate({
+      ...date,
+      [type]: newDate,
+    });
+  };
+
+  return (
+    <ButtonGroup variant="outlined">
+      <PopoverDate
+        type="start"
+        date={date.start}
+        updateDate={updateDate}
+        text={date.start ? convertToJalali(date.start) : "از تاریخ"}
+      />
+      <PopoverDate
+        type="end"
+        date={date.end}
+        updateDate={updateDate}
+        text={date.end ? convertToJalali(date.end) : "تا تاریخ"}
+      />
+    </ButtonGroup>
+  );
+}
+
+export default FilterDate;

components/panel/userAccount/Head.js

@@ -1,9 +1,7 @@
 "use client";
 
+import UploadFile from "@/app/component/UploadFile";
 import { useRef } from "react";
-import { Button } from "@mui/material";
-import ProfileP from "@/components/icons/ProfileP";
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
   const fileRef = useRef();
@@ -12,21 +10,7 @@ function Head() {
 
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <input className="contents" ref={fileRef} type="file" />
+      <UploadFile fileRef={fileRef} openInput={openInput} />
-      <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>
     </div>
   );
 }