add prettier formatter to all file

app/about-us/page.js

@@ -1,12 +1,12 @@
-import AboutUsPage from '@/components/aboutUs';
+import AboutUsPage from "@/components/aboutUs";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
 
 function AboutUs() {
-    return (
+  return (
-        <Layout title='درباره ما' name='about-us'>
+    <Layout title="درباره ما" name="about-us">
-            <AboutUsPage />
+      <AboutUsPage />
-        </Layout>
+    </Layout>
-    )
+  );
 }
 
-export default AboutUs
+export default AboutUs;

app/blog/[slug]/page.js

@@ -1,19 +1,15 @@
-import BlogPage from '@/components/blog';
+import BlogPage from "@/components/blog";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
-import articles from '@/data/articles.json';
+import articles from "@/data/articles.json";
 
 function Blog({ params: { slug } }) {
+  const article = articles.find((item) => item.id === +slug);
 
-    const article = articles.find(item => item.id === +slug);
+  return (
-
+    <Layout title="وبلاگ" name="blog">
-    return (
+      <BlogPage article={article} articles={articles} />
-        <Layout title='وبلاگ' name='blog'>
+    </Layout>
-            <BlogPage
+  );
-                article={article}
-                articles={articles}
-            />
-        </Layout>
-    )
 }
 
-export default Blog
+export default Blog;

app/blogs/page.js

@@ -1,12 +1,12 @@
-import BlogsPage from '@/components/blogs'
+import BlogsPage from "@/components/blogs";
-import Layout from '@/components/layout'
+import Layout from "@/components/layout";
 
 function Blogs() {
-    return (
+  return (
-        <Layout title='وبلاگ ها' name='blogs'>
+    <Layout title="وبلاگ ها" name="blogs">
-            <BlogsPage />
+      <BlogsPage />
-        </Layout>
+    </Layout>
-    )
+  );
 }
 
-export default Blogs
+export default Blogs;

app/booking/[slug]/page.js

@@ -1,68 +1,71 @@
-'use client'
+"use client";
 
-import { useState } from 'react';
+import { useState } from "react";
 
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
-import doctors from '@/data/doctors.json';
+import doctors from "@/data/doctors.json";
-import Date from '@/components/booking/date';
+import Date from "@/components/booking/date";
-import BookingPage from '@/components/booking';
+import BookingPage from "@/components/booking";
-import RegisterPage from '@/components/register';
+import RegisterPage from "@/components/register";
-import Paying from '@/components/booking/paying';
+import Paying from "@/components/booking/paying";
-import Detail from '@/components/booking/detail';
+import Detail from "@/components/booking/detail";
-import FailedPay from '@/components/booking/failedPay';
+import FailedPay from "@/components/booking/failedPay";
-import LogInPage from '@/components/register/LogInPage';
+import LogInPage from "@/components/register/LogInPage";
-import SuccessPay from '@/components/booking/successPay';
+import SuccessPay from "@/components/booking/successPay";
-import SetCodePage from '@/components/register/SetCodePage';
+import SetCodePage from "@/components/register/SetCodePage";
 
 function Booking({ params: { slug } }) {
+  const doctor = doctors.find((item) => item.id === +slug);
 
-    const doctor = doctors.find(item => item.id === +slug);
+  const [step, setStep] = useState(0);
+  const [isForAnother, setIsForAnother] = useState(false);
 
-    const [step, setStep] = useState(0);
+  const [data, setData] = useState({
-    const [isForAnother, setIsForAnother] = useState(false);
+    phone: { value: "09121056987", isEdit: false },
+    codemeli: { value: "1741025645", isEdit: false },
+    name: { value: "ساغر صابری نژاد", isEdit: false },
+  });
 
-    const [data, setData] = useState({
+  const elements = [
-        phone: { value: '09121056987', isEdit: false },
+    <Date doctor={doctor} setStep={setStep} />,
-        codemeli: { value: '1741025645', isEdit: false },
+    <LogInPage setIsSendMsg={false} setStep={setStep} />,
-        name: { value: 'ساغر صابری نژاد', isEdit: false }
+    <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
-    });
+    <Detail
+      isForAnother={isForAnother}
+      setIsForAnother={setIsForAnother}
+      setStep={setStep}
+      data={data}
+      setData={setData}
+    />,
+    <Paying setStep={setStep} />,
+    <SuccessPay setStep={setStep} />,
+    <FailedPay setStep={setStep} />,
+  ];
 
-    const elements = [
+  return (
-        <Date doctor={doctor} setStep={setStep} />,
+    <>
-        <LogInPage setIsSendMsg={false} setStep={setStep} />,
+      {step === 1 || step === 2 ? (
-        <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
+        <RegisterPage>{elements[step]}</RegisterPage>
-        <Detail isForAnother={isForAnother} setIsForAnother={setIsForAnother} setStep={setStep} data={data} setData={setData} />,
+      ) : (
-        <Paying setStep={setStep} />,
+        <Layout
-        <SuccessPay setStep={setStep} />,
+          title="رزرو"
-        <FailedPay setStep={setStep} />
+          name="booking"
-    ]
+          disableFooter={step > 2}
-
+          paddingBottom="pb-[80px]"
-    return (
+        >
-        <>
+          <BookingPage
-            {step === 1 || step === 2 ? (
+            disableSide={step === 5 || step === 6}
-                <RegisterPage>
+            isFirst={step === 0}
-                    {elements[step]}
+            setStep={setStep}
-                </RegisterPage>
+            doctor={doctor}
-            ) : (
+            step={step}
-                <Layout
+          >
-                    title='رزرو'
+            {elements[step]}
-                    name='booking'
+          </BookingPage>
-                    disableFooter={step > 2}
+        </Layout>
-                    paddingBottom='pb-[80px]'
+      )}
-                >
+    </>
-                    <BookingPage
+  );
-                        disableSide={step === 5 || step === 6}
-                        isFirst={step === 0}
-                        setStep={setStep}
-                        doctor={doctor}
-                        step={step}
-                    >
-                        {elements[step]}
-                    </BookingPage>
-                </Layout>
-            )}
-        </>
-    )
 }
 
-export default Booking
+export default Booking;

app/clinic/[slug]/page.js

@@ -1,20 +1,16 @@
-import ClinicPage from '@/components/clinic';
+import ClinicPage from "@/components/clinic";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
-import clinics from '@/data/clinics.json';
+import clinics from "@/data/clinics.json";
-import doctors from '@/data/doctors.json';
+import doctors from "@/data/doctors.json";
 
 function Blog({ params: { slug } }) {
+  const clinic = clinics.find((item) => item.id === +slug);
 
-    const clinic = clinics.find(item => item.id === +slug);
+  return (
-
+    <Layout title="کلینیک" name="clinic">
-    return (
+      <ClinicPage data={clinic} doctors={doctors} />
-        <Layout title='کلینیک' name='clinic'>
+    </Layout>
-            <ClinicPage
+  );
-                data={clinic}
-                doctors={doctors}
-            />
-        </Layout>
-    )
 }
 
-export default Blog
+export default Blog;

app/clinics/page.js

@@ -1,12 +1,12 @@
-import ClinicsPage from '@/components/clinics';
+import ClinicsPage from "@/components/clinics";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
 
 function Clinics() {
-    return (
+  return (
-        <Layout title='کلینیک ها' name='clinics'>
+    <Layout title="کلینیک ها" name="clinics">
-            <ClinicsPage />
+      <ClinicsPage />
-        </Layout>
+    </Layout>
-    )
+  );
 }
 
-export default Clinics
+export default Clinics;

app/component/AnimationTextHead.js

@@ -1,16 +1,19 @@
 function AnimationTextHead({ name, text, children }) {
-    return (
+  return (
-        <div className='flex justify-center items-start relative w-fit'>
+    <div className="flex justify-center items-start relative w-fit">
-            <div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'>
+      <div className="overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]">
-                <p
+        <p
-                    data-aos={name}
+          data-aos={name}
-                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold'>{text}</p>
+          className="text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold"
-            </div>
+        >
-            <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
+          {text}
-                {children}
+        </p>
-            </div>
+      </div>
-        </div>
+      <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
-    )
+        {children}
+      </div>
+    </div>
+  );
 }
 
-export default AnimationTextHead
+export default AnimationTextHead;

app/component/CustomTable.js

@@ -1,39 +1,46 @@
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 
 function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
-    return (
+  return (
-        <TableContainer
+    <TableContainer
-            className='!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]'
+      className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
-            sx={{
+      sx={{
-                '&.MuiTableContainer-root': {
+        "&.MuiTableContainer-root": {
-                    borderRadius: zeroRadius && '0 !important'
+          borderRadius: zeroRadius && "0 !important",
-                }
+        },
-            }}
+      }}
-        >
+    >
-            <Table className='!rounded-0 !shadow-none !overflow-hidden'>
+      <Table className="!rounded-0 !shadow-none !overflow-hidden">
-                <TableHead>
+        <TableHead>
-                    <TableRow
+          <TableRow className="!bg-[#EFEFEF]">
-                        className='!bg-[#EFEFEF]'
+            {tableHead.map((item, idx) => (
-                    >
+              <TableCell
-                        {tableHead.map((item, idx) => (
+                key={idx}
-                            <TableCell
+                className={`
-                                key={idx}
-                                className={`
                                 !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
-                                ${centerTable.includes(idx) ? '!text-center' : '!text-start'}
+                                ${
+                                  centerTable.includes(idx)
+                                    ? "!text-center"
+                                    : "!text-start"
+                                }
                             `}
-                            >
+              >
-                                {item}
+                {item}
-                            </TableCell>
+              </TableCell>
-                        ))}
+            ))}
-                    </TableRow>
+          </TableRow>
-                </TableHead>
+        </TableHead>
-                <TableBody>
+        <TableBody>{children}</TableBody>
-                    {children}
+      </Table>
-                </TableBody>
+    </TableContainer>
-            </Table>
+  );
-        </TableContainer>
-    )
 }
 
-export default CustomTable
+export default CustomTable;

app/component/EditField.js

@@ -1,55 +1,63 @@
-import EditGrayA from "@/components/icons/EditGrayA"
+import EditGrayA from "@/components/icons/EditGrayA";
-import EditOrangeA from "@/components/icons/EditOrangeA"
+import EditOrangeA from "@/components/icons/EditOrangeA";
-import { Button, TextField } from "@mui/material"
+import { Button, TextField } from "@mui/material";
 
-function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) {
+function EditField({
-    return (
+  changeData,
-        <div className="relative w-full">
+  multiline,
-            <TextField
+  icon,
-                value={data?.value}
+  placeholder,
-                rows={multiline}
+  data,
-                multiline={multiline}
+  name,
-                disabled={!data?.isEdit}
+  iconGray,
-                placeholder={placeholder || ''}
+  isTransparent,
-                type='text'
+}) {
-                className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
+  return (
-                onChange={e => {
+    <div className="relative w-full">
-                    changeData(e.target.value, 'value', name)
+      <TextField
-                }}
+        value={data?.value}
-                sx={{
+        rows={multiline}
-                    '& .MuiFormLabel-root': {
+        multiline={multiline}
-                        top: '-4px !important'
+        disabled={!data?.isEdit}
-                    },
+        placeholder={placeholder || ""}
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+        type="text"
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+        className={`!w-full res-field-account ${
-                    '& .MuiInputBase-root': {
+          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
-                        padding: '0 !important',
+        }`}
-                        borderRadius: '8px !important'
+        onChange={(e) => {
-                    },
+          changeData(e.target.value, "value", name);
-                    '.Mui-focused': {
+        }}
-                        '& .MuiOutlinedInput-notchedOutline': {
+        sx={{
-                            border: '1px solid #5559CE !important',
+          "& .MuiFormLabel-root": {
-                            transition: '0.5s all'
+            top: "-4px !important",
-                        }
+          },
-                    }
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                }}
+          "& .MuiOutlinedInput-notchedOutline": {
-            />
+            border: "1px solid #D7D7D7 !important",
-            <Button
+          },
-                className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+          "& .MuiInputBase-root": {
-                    ${multiline ? '!top-[24px]' : '!top-1/2'}`}
+            padding: "0 !important",
-                onClick={() => {
+            borderRadius: "8px !important",
-                    changeData(!data.isEdit, 'isEdit', name)
+          },
-                }}
+          ".Mui-focused": {
-            >
+            "& .MuiOutlinedInput-notchedOutline": {
-                {icon ? icon :
+              border: "1px solid #5559CE !important",
-                    iconGray ? (
+              transition: "0.5s all",
-                        <EditGrayA />
+            },
-                    ) : (
+          },
-                        <EditOrangeA />
+        }}
-                    )}
+      />
-            </Button>
+      <Button
-        </div>
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
-    )
+                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
+        onClick={() => {
+          changeData(!data.isEdit, "isEdit", name);
+        }}
+      >
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
+      </Button>
+    </div>
+  );
 }
 
-export default EditField
+export default EditField;

app/component/Field.js

@@ -1,30 +1,32 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
 
 function Field({ title, type, multiline, isPlaceHolder }) {
-    return (
+  return (
-        <TextField
+    <TextField
-            placeholder={isPlaceHolder && title}
+      placeholder={isPlaceHolder && title}
-            label={!isPlaceHolder ? title : ''}
+      label={!isPlaceHolder ? title : ""}
-            type={type || 'text'}
+      type={type || "text"}
-            multiline={!!multiline}
+      multiline={!!multiline}
-            rows={!!multiline ? 4 : 1}
+      rows={!!multiline ? 4 : 1}
-            className="!w-full !mx-auto !bg-[#FFF]"
+      className="!w-full !mx-auto !bg-[#FFF]"
-            sx={{
+      sx={{
-                '& .MuiFormLabel-root': {
+        "& .MuiFormLabel-root": {
-                    top: '-4px !important'
+          top: "-4px !important",
-                },
+        },
-                '& .MuiInputBase-input': { padding: '12.5px 14px' },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                '& .MuiInputBase-root': { borderRadius: '6px !important' },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
-                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+        "& .MuiOutlinedInput-notchedOutline": {
-                ".Mui-focused": {
+          border: "1px solid #E9ECEF !important",
-                    '& .MuiOutlinedInput-notchedOutline': {
+        },
-                        border: '1px solid #5559CE !important',
+        ".Mui-focused": {
-                        transition: '0.5s all'
+          "& .MuiOutlinedInput-notchedOutline": {
-                    }
+            border: "1px solid #5559CE !important",
-                }
+            transition: "0.5s all",
-            }}
+          },
-        />
+        },
-    )
+      }}
+    />
+  );
 }
 
-export default Field
+export default Field;

app/component/FieldIcon.js

@@ -1,42 +1,42 @@
-import EditGrayA from "@/components/icons/EditGrayA"
+import EditGrayA from "@/components/icons/EditGrayA";
-import EditOrangeA from "@/components/icons/EditOrangeA"
+import EditOrangeA from "@/components/icons/EditOrangeA";
-import { Button, TextField } from "@mui/material"
+import { Button, TextField } from "@mui/material";
 
 function FieldIcon({ changeData, icon, placeholder, name }) {
-    return (
+  return (
-        <div className="relative w-full">
+    <div className="relative w-full">
-            <TextField
+      <TextField
-                placeholder={placeholder || ''}
+        placeholder={placeholder || ""}
-                type='text'
+        type="text"
-                className='!w-full'
+        className="!w-full"
-                onChange={e => {
+        onChange={(e) => {
-                    changeData(e.target.value, name)
+          changeData(e.target.value, name);
-                }}
+        }}
-                sx={{
+        sx={{
-                    '& .MuiFormLabel-root': {
+          "& .MuiFormLabel-root": {
-                        top: '-4px !important'
+            top: "-4px !important",
-                    },
+          },
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+          "& .MuiOutlinedInput-notchedOutline": {
-                    '& .MuiInputBase-root': {
+            border: "1px solid #D7D7D7 !important",
-                        padding: '0 !important',
+          },
-                        borderRadius: '8px !important'
+          "& .MuiInputBase-root": {
-                    },
+            padding: "0 !important",
-                    '.Mui-focused': {
+            borderRadius: "8px !important",
-                        '& .MuiOutlinedInput-notchedOutline': {
+          },
-                            border: '1px solid #5559CE !important',
+          ".Mui-focused": {
-                            transition: '0.5s all'
+            "& .MuiOutlinedInput-notchedOutline": {
-                        }
+              border: "1px solid #5559CE !important",
-                    }
+              transition: "0.5s all",
-                }}
+            },
-            />
+          },
-            <Button
+        }}
-                className='!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1'
+      />
-            >
+      <Button className="!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1">
-                {icon}
+        {icon}
-            </Button>
+      </Button>
-        </div>
+    </div>
-    )
+  );
 }
 
-export default FieldIcon
+export default FieldIcon;

app/component/ItemDoctor.js

@@ -12,75 +12,86 @@ import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
 
 function ItemDoctor({ doctor, loading }) {
-    return (
+  return (
-        <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
+    <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
-            {/* Detail Doctor */}
+      {/* Detail Doctor */}
-            <div className="flex items-center justify-start gap-2.5">
+      <div className="flex items-center justify-start gap-2.5">
-                <CircularLoading loading={loading} width={66} height={66}>
+        <CircularLoading loading={loading} width={66} height={66}>
-                    <Image
+          <Image
-                        width={72}
+            width={72}
-                        height={72}
+            height={72}
-                        src={doctor.img}
+            src={doctor.img}
-                        alt="image-doctor"
+            alt="image-doctor"
-                        className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
+            className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
-                    />
+          />
-                </CircularLoading>
+        </CircularLoading>
-                <div className="flex flex-col items-start justify-center gap-2">
+        <div className="flex flex-col items-start justify-center gap-2">
-                    <TextLoading width={90} height={15} loading={loading}>
+          <TextLoading width={90} height={15} loading={loading}>
-                        <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+            <p className="text-[#3B3B3B] text-[14px] font-bold">
-                    </TextLoading>
+              {doctor.name}
-                    <TextLoading width={120} height={15} loading={loading}>
+            </p>
-                        <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
+          </TextLoading>
-                    </TextLoading>
+          <TextLoading width={120} height={15} loading={loading}>
-                    <CustomLoading width={100} height={25} loading={loading}>
+            <p className="text-[#616161] text-[14px] font-normal">
-                        <div className="flex rounded items-center justify-start gap-2">
+              تخصص: {doctor.expertise}
-                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+            </p>
-                                <LikeD />
+          </TextLoading>
-                                <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+          <CustomLoading width={100} height={25} loading={loading}>
-                            </div>
+            <div className="flex rounded items-center justify-start gap-2">
-                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+              <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
-                                <PointD />
+                <LikeD />
-                                <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
+                <p className="text-[#616161] text-[12px] font-normal">
-                            </div>
+                  {doctor.satisfaction}%
-                        </div>
+                </p>
-                    </CustomLoading>
+              </div>
-                </div>
+              <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                <PointD />
+                <p className="text-[#616161] text-[12px] font-normal">
+                  {doctor.point}
+                </p>
+              </div>
             </div>
+          </CustomLoading>
+        </div>
+      </div>
 
-            {/* Hours of work */}
+      {/* Hours of work */}
-            <div className="flex my-4 items-center justify-start gap-0.5">
+      <div className="flex my-4 items-center justify-start gap-0.5">
-                <ClockD />
+        <ClockD />
-                <TextLoading width={150} height={15} loading={loading}>
+        <TextLoading width={150} height={15} loading={loading}>
-                    <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+          <p className="text-[#7E7E7E] text-[12px] font-normal">
-                </TextLoading>
+            ساعت کاری: {doctor.hours_of_work}
-            </div>
+          </p>
-            <CustomLoading loading={loading} width={150} height={20}>
+        </TextLoading>
-                <p
+      </div>
-                    className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
+      <CustomLoading loading={loading} width={150} height={20}>
-                    ${doctor.free_turn ?
+        <p
-                            'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
+          className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
-                            'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
+                    ${
-                        }`}
+                      doctor.free_turn
-                >{doctor.free_turn ?
+                        ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
-                    `اولین نوبت آزاد: ${doctor.free_turn}` :
+                        : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
-                    'نوبت ندارد'
+                    }`}
-                    }</p>
+        >
-            </CustomLoading>
+          {doctor.free_turn
-            {/* Arrow */}
+            ? `اولین نوبت آزاد: ${doctor.free_turn}`
-            <Link href={`/doctor/${doctor.id}`}>
+            : "نوبت ندارد"}
-                <Button
+        </p>
-                    variant="contained"
+      </CustomLoading>
-                    className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
+      {/* Arrow */}
-                     ${!doctor.free_turn || loading &&
+      <Link href={`/doctor/${doctor.id}`}>
-                        '!bg-[#D7D7D7]'}
+        <Button
+          variant="contained"
+          className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
+                     ${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
                     `}
-                    disabled={!doctor.free_turn || loading}
+          disabled={!doctor.free_turn || loading}
-                >
+        >
-                    <ArrowLeftD />
+          <ArrowLeftD />
-                </Button>
+        </Button>
-            </Link>
+      </Link>
-        </li>
+    </li>
-    )
+  );
 }
 
-export default ItemDoctor
+export default ItemDoctor;

app/component/Logo.js

@@ -1,22 +1,24 @@
-import Image from 'next/image'
+import Image from "next/image";
-import Link from 'next/link'
+import Link from "next/link";
-import React from 'react'
+import React from "react";
 
 function Logo({ isAbsolute }) {
-    return (
+  return (
-        <Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0' : ''}>
+    <Link href="/" className={isAbsolute ? "absolute right-[32px] top-0" : ""}>
-            <div className="flex items-center justify-start gap-[5px]">
+      <div className="flex items-center justify-start gap-[5px]">
-                <Image
+        <Image
-                    className='w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]'
+          className="w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]"
-                    src='/assets/images/logo.png'
+          src="/assets/images/logo.png"
-                    width={30}
+          width={30}
-                    height={30}
+          height={30}
-                    alt="logo"
+          alt="logo"
-                />
+        />
-                <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
+        <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">
-            </div>
+          نوبت ۷۲۴
-        </Link>
+        </p>
-    )
+      </div>
+    </Link>
+  );
 }
 
-export default Logo
+export default Logo;

app/component/Pageguide.js

@@ -1,26 +1,31 @@
 function Pageguide({ list }) {
-    return (
+  return (
-        <ul className='flex items-center justify-start gap-1'>
+    <ul className="flex items-center justify-start gap-1">
-            {list.map((item, idx) => (
+      {list.map((item, idx) => (
-                <li
+        <li key={idx} className="flex items-center justify-start gap-1">
-                    key={idx}
+          <p
-                    className="flex items-center justify-start gap-1"
+            className={`text-[16px] font-normal
-                >
+                            ${
-                    <p
+                              list.length > idx + 1
-                        className={`text-[16px] font-normal
+                                ? "text-[#9B9B9B]"
-                            ${list.length > idx + 1 ? 'text-[#9B9B9B]' : 'text-[#525252]'}
+                                : "text-[#525252]"
+                            }
                             `}
-                    >{item}</p>
+          >
-                    <span
+            {item}
-                        className={`
+          </p>
+          <span
+            className={`
                             text-[#9B9B9B] text-[16px] font-normal
-                            ${list.length > idx + 1 ? 'flex' : 'hidden'}
+                            ${list.length > idx + 1 ? "flex" : "hidden"}
                             `}
-                    >{'>'}</span>
+          >
-                </li>
+            {">"}
-            ))}
+          </span>
-        </ul>
+        </li>
-    )
+      ))}
+    </ul>
+  );
 }
 
-export default Pageguide
+export default Pageguide;

app/component/Pagination.js

@@ -1,26 +1,27 @@
-import { Pagination as PaginationMUI } from '@mui/material'
+import { Pagination as PaginationMUI } from "@mui/material";
 
 function Pagination() {
-    return (
+  return (
-        <PaginationMUI
+    <PaginationMUI
-            // count={doctors.length / 12} org
+      // count={doctors.length / 12} org
-            count={20} // test
+      count={20} // test
-            color='primary'
+      color="primary"
-            sx={{
+      sx={{
-                '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
+        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
-                    color: '#616161',
+          color: "#616161",
-                    fontSize: '16px',
+          fontSize: "16px",
-                    fontWeight: '500'
+          fontWeight: "500",
-                },
+        },
-                '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
+        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
-                    color: '#F8F8FF'
+          {
-                },
+            color: "#F8F8FF",
-                '& .MuiSvgIcon-root': {
+          },
-                    rotate: '180deg !important'
+        "& .MuiSvgIcon-root": {
-                }
+          rotate: "180deg !important",
-            }}
+        },
-        />
+      }}
-    )
+    />
+  );
 }
 
-export default Pagination
+export default Pagination;

app/component/ProfressDetail.js

@@ -1,24 +1,28 @@
-import { numberToArStyle } from "@/helper"
+import { numberToArStyle } from "@/helper";
-import { LinearProgress } from "@mui/material"
+import { LinearProgress } from "@mui/material";
 
 function ProgressDetail({ data }) {
-    return (
+  return (
-        <li className="flex items-center justify-start gap-2 w-full">
+    <li className="flex items-center justify-start gap-2 w-full">
-            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
+      <p className="text-[#525252] text-[14px] font-normal w-[118px]">
-            <LinearProgress
+        {data.label}
-                value={data.progress}
+      </p>
-                variant="determinate"
+      <LinearProgress
-                className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
+        value={data.progress}
-                sx={{
+        variant="determinate"
-                    '& .MuiLinearProgress-bar': {
+        className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
-                        background: '#05BA58',
+        sx={{
-                        borderRadius: '10px'
+          "& .MuiLinearProgress-bar": {
-                    }
+            background: "#05BA58",
-                }}
+            borderRadius: "10px",
-            />
+          },
-            <p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
+        }}
-        </li>
+      />
-    )
+      <p className="text-[#525252] text-[20px] font-medium">
+        {numberToArStyle(data.progress)}%
+      </p>
+    </li>
+  );
 }
 
-export default ProgressDetail
+export default ProgressDetail;

app/component/ProgressChange.js

@@ -1,41 +1,40 @@
-import { Slider } from "@mui/material"
+import { Slider } from "@mui/material";
-import { useState } from "react"
+import { useState } from "react";
 
 function ProgressChange({ data }) {
+  const [value, setValue] = useState(70);
 
-    const [value, setValue] = useState(70)
+  return (
-
+    <li className="flex items-center justify-start gap-3 w-full">
-    return (
+      <p className="text-[#525252] text-[14px] font-normal w-[118px]">
-        <li className="flex items-center justify-start gap-3 w-full">
+        {data.label}
-            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
+      </p>
-            <Slider
+      <Slider
-                defaultValue={value}
+        defaultValue={value}
-                className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
+        className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
-                onChange={e => setValue(e.target.value)}
+        onChange={(e) => setValue(e.target.value)}
-                sx={{
+        sx={{
-                    '& .MuiSlider-rail': {
+          "& .MuiSlider-rail": {
-                        background: '#E8E8E8',
+            background: "#E8E8E8",
-                        opacity: '100'
+            opacity: "100",
-                    },
+          },
-                    '& .MuiSlider-track': {
+          "& .MuiSlider-track": {
-                        background: '#05BA58',
+            background: "#05BA58",
-                        border: 'none'
+            border: "none",
-                    },
+          },
-                    '& .MuiSlider-thumb': {
+          "& .MuiSlider-thumb": {
-                        marginRight: '-21px',
+            marginRight: "-21px",
-                        background: '#EBEBEB',
+            background: "#EBEBEB",
-                        border: '1px solid #05BA58 !important'
+            border: "1px solid #05BA58 !important",
-                    },
+          },
-                    '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+          "& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
-                        boxShadow: 'none'
+            boxShadow: "none",
-                    },
+          },
-                }}
+        }}
-            />
+      />
-            <p className="text-[#525252] text-[20px] font-medium w-[30px]">
+      <p className="text-[#525252] text-[20px] font-medium w-[30px]">{value}</p>
-                {value}
+    </li>
-            </p>
+  );
-        </li>
-    )
 }
 
-export default ProgressChange
+export default ProgressChange;

app/component/Tabs.js

@@ -1,41 +1,39 @@
-import { Box, Tab, Tabs as TabsMUI } from '@mui/material';
+import { Box, Tab, Tabs as TabsMUI } from "@mui/material";
 
 function a11yProps(index) {
-    return {
+  return {
-        id: `simple-tab-${index}`,
+    id: `simple-tab-${index}`,
-        'aria-controls': `simple-tabpanel-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
-    };
+  };
-};
-
-function Tabs({ value, handleChange, listTab, isSm, style }) {
-    return (
-        <Box
-            className="!border-none !w-full"
-        >
-            <TabsMUI
-                value={value}
-                onChange={handleChange}
-                sx={{
-                    ...style,
-                    '.MuiTabs-fixed': {
-                        overflow: 'auto !important'
-                    },
-                }}
-            >
-                {listTab.map((item, idx) => (
-                    <Tab
-                        key={idx}
-                        label={item}
-                        {...a11yProps(idx)}
-                        className={`
-                            text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
-                            ${isSm ? '!w-1/2 !m-0' : '!mr-2'}
-                        `}
-                    />
-                ))}
-            </TabsMUI>
-        </Box>
-    )
 }
 
-export default Tabs
+function Tabs({ value, handleChange, listTab, isSm, style }) {
+  return (
+    <Box className="!border-none !w-full">
+      <TabsMUI
+        value={value}
+        onChange={handleChange}
+        sx={{
+          ...style,
+          ".MuiTabs-fixed": {
+            overflow: "auto !important",
+          },
+        }}
+      >
+        {listTab.map((item, idx) => (
+          <Tab
+            key={idx}
+            label={item}
+            {...a11yProps(idx)}
+            className={`
+                            text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
+                            ${isSm ? "!w-1/2 !m-0" : "!mr-2"}
+                        `}
+          />
+        ))}
+      </TabsMUI>
+    </Box>
+  );
+}
+
+export default Tabs;

app/component/ThemeRegistry.js

@@ -1,65 +1,63 @@
 // app/ThemeRegistry.tsx
-'use client';
+"use client";
-import createCache from '@emotion/cache';
+import createCache from "@emotion/cache";
-import { prefixer } from 'stylis';
+import { prefixer } from "stylis";
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from "stylis-plugin-rtl";
-import { useServerInsertedHTML } from 'next/navigation';
+import { useServerInsertedHTML } from "next/navigation";
-import { CacheProvider, ThemeProvider } from '@emotion/react';
+import { CacheProvider, ThemeProvider } from "@emotion/react";
-import React from 'react';
+import React from "react";
-import theme from '../theme/theme';
+import theme from "../theme/theme";
 
 // This implementation is from emotion-js
 // https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
-export default function ThemeRegistry({
+export default function ThemeRegistry({ children }) {
-    children
+  const options = {
-}) {
+    key: "muirtl",
-    const options = {
+    stylisPlugins: [prefixer, rtlPlugin],
-        key: 'muirtl',
+  };
-        stylisPlugins: [prefixer, rtlPlugin],
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
     }
-    const [{ cache, flush }] = React.useState(() => {
-        const cache = createCache(options);
-        cache.compat = true;
-        const prevInsert = cache.insert;
-        let inserted = [];
-        cache.insert = (...args) => {
-            const serialized = args[1];
-            if (cache.inserted[serialized.name] === undefined) {
-                inserted.push(serialized.name);
-            }
-            return prevInsert(...args);
-        };
-        const flush = () => {
-            const prevInserted = inserted;
-            inserted = [];
-            return prevInserted;
-        };
-        return { cache, flush };
-    });
-
-    useServerInsertedHTML(() => {
-        const names = flush();
-        if (names.length === 0) {
-            return null;
-        }
-        let styles = '';
-        for (const name of names) {
-            styles += cache.inserted[name];
-        }
-        return (
-            <style
-                key={cache.key}
-                data-emotion={`${cache.key} ${names.join(' ')}`}
-                dangerouslySetInnerHTML={{
-                    __html: styles,
-                }}
-            />
-        );
-    });
-
     return (
-        <CacheProvider value={cache}>
+      <style
-            <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        key={cache.key}
-        </CacheProvider>
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
     );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </CacheProvider>
+  );
 }

app/component/TimePickerField.js

@@ -1,73 +1,84 @@
 import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 
 function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
+  const [value, setValue] = useState("00:00");
 
-    const [value, setValue] = useState('00:00');
+  return (
+    <div className="w-full relative">
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          ampm={false}
+          disabled={disable}
+          format="hh:mm"
+          className="!w-full"
+          shouldDisableTime={(timeValue, clockType) => {
+            if (clockType === "hours") {
+              const { idx, is_morgen } = dataChange;
+              const value =
+                data[idx][is_morgen ? "morning_time" : "evening_time"][0];
+              const hourSelected = value ? +value.split(":")[0] : false;
 
-    return (
+              const disableMinHour =
-        <div className="w-full relative">
+                timeStart || !value ? false : hourSelected + 1 > timeValue.$H;
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              return dataChange.is_morgen
-                <TimePicker
+                ? !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour)
-                    ampm={false}
+                : !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
-                    disabled={disable}
+            }
-                    format="hh:mm"
+          }}
-                    className="!w-full"
+          views={["hours", "minutes"]}
-                    shouldDisableTime={(timeValue, clockType) => {
+          placeholder="انتخاب کنید..."
-                        if (clockType === 'hours') {
+          onChange={(e) => {
-                            const { idx, is_morgen } = dataChange;
+            const hours = e.$H;
-                            const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
+            const minute = e.$m;
-                            const hourSelected = value ? +value.split(':')[0] : false
+            const handleTwoLength = (value) =>
+              String(value).length === 1 ? `0${value}` : value;
+            const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
+              minute
+            )}`;
 
-                            const disableMinHour = timeStart || !value ? false :
+            const newData = data;
-                                (hourSelected + 1 > timeValue.$H)
+            const { idx, is_morgen } = dataChange;
-                            return dataChange.is_morgen ?
+            newData[idx][is_morgen ? "morning_time" : "evening_time"][
-                                !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
+              timeStart ? 0 : 1
-                                !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
+            ] = newValue;
 
-                        }
+            setValue(newValue);
-                    }}
+          }}
-                    views={['hours', 'minutes']}
+          sx={{
-                    placeholder="انتخاب کنید..."
+            "& .MuiFormLabel-root": {
-                    onChange={e => {
+              top: "-4px !important",
-                        const hours = e.$H;
+            },
-                        const minute = e.$m;
+            "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                        const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
+            "& .MuiOutlinedInput-notchedOutline": {
-                        const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
+              border: "1px solid #D7D7D7 !important",
-
+            },
-                        const newData = data;
+            "& .MuiInputBase-root": {
-                        const { idx, is_morgen } = dataChange;
+              borderRadius: "8px !important",
-                        newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
+            },
-
+            ".Mui-focused": {
-                        setValue(newValue);
+              "& .MuiOutlinedInput-notchedOutline": {
-                    }}
+                border: "1px solid #5559CE !important",
-                    sx={{
+                transition: "0.5s all",
-                        '& .MuiFormLabel-root': {
+              },
-                            top: '-4px !important'
+            },
-                        },
+            "& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
-                        '& .MuiInputBase-input': { padding: '12.5px 14px' },
+              {
-                        '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+                display: "none !important",
-                        '& .MuiInputBase-root': {
+              },
-                            borderRadius: '8px !important'
+          }}
-                        },
+        />
-                        '.Mui-focused': {
+        <p
-                            '& .MuiOutlinedInput-notchedOutline': {
+          className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
-                                border: '1px solid #5559CE !important',
-                                transition: '0.5s all'
-                            }
-                        },
-                        '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
-                            display: 'none !important'
-                        }
-                    }}
-                />
-                <p className={`absolute 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)]'}`}>{value}</p>
+                ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
-            </LocalizationProvider>
+        >
-        </div>
+          {value}
-    )
+        </p>
+      </LocalizationProvider>
+    </div>
+  );
 }
 
-export default TimePickerField
+export default TimePickerField;

app/component/comment/Field.js

@@ -1,28 +1,30 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
 
 function Field({ title, type, multiline, isPlaceHolder }) {
-    return (
+  return (
-        <TextField
+    <TextField
-            placeholder={isPlaceHolder && title}
+      placeholder={isPlaceHolder && title}
-            label={!isPlaceHolder ? title : ''}
+      label={!isPlaceHolder ? title : ""}
-            type={type || 'text'}
+      type={type || "text"}
-            className="!w-full !mx-auto !bg-transparent"
+      className="!w-full !mx-auto !bg-transparent"
-            sx={{
+      sx={{
-                '& .MuiFormLabel-root': {
+        "& .MuiFormLabel-root": {
-                    top: '-4px !important'
+          top: "-4px !important",
-                },
+        },
-                '& .MuiInputBase-input': { padding: '12.5px 14px' },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                '& .MuiInputBase-root': { borderRadius: '6px !important' },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
-                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #EFEFEF !important' },
+        "& .MuiOutlinedInput-notchedOutline": {
-                ".Mui-focused": {
+          border: "1px solid #EFEFEF !important",
-                    '& .MuiOutlinedInput-notchedOutline': {
+        },
-                        border: '1px solid #5559CE !important',
+        ".Mui-focused": {
-                        transition: '0.5s all'
+          "& .MuiOutlinedInput-notchedOutline": {
-                    }
+            border: "1px solid #5559CE !important",
-                }
+            transition: "0.5s all",
-            }}
+          },
-        />
+        },
-    )
+      }}
+    />
+  );
 }
 
 export default Field;

app/component/comment/ItemUser.js

@@ -9,155 +9,179 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
 import ArrowUpComment from "@/components/icons/ArrowUpComment";
 import LikeComment from "@/components/icons/LikeComment";
 
-function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) {
+function ItemUser({
-
+  update,
-    const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
+  setUpdate,
-        if (nameIsLike === 'is_like' && data.is_dislike) {
+  isReply,
-            data.is_dislike = false;
+  list,
-            data.dislike--;
+  setList,
-        } else if (nameIsLike === 'is_dislike' && data.is_like) {
+  data,
-            data.is_like = false;
+  loading,
-            data.like--;
+}) {
-        }
+  const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
-        data[nameLike] = lengthLike;
+    if (nameIsLike === "is_like" && data.is_dislike) {
-        data[nameIsLike] = !data[nameIsLike];
+      data.is_dislike = false;
-        setUpdate(!update);
+      data.dislike--;
+    } else if (nameIsLike === "is_dislike" && data.is_like) {
+      data.is_like = false;
+      data.like--;
     }
+    data[nameLike] = lengthLike;
+    data[nameIsLike] = !data[nameIsLike];
+    setUpdate(!update);
+  };
 
-    return (
+  return (
-        <li className="w-full">
+    <li className="w-full">
-            <div className="flex items-center justify-start gap-2">
+      <div className="flex items-center justify-start gap-2">
-                {loading ? (
+        {loading ? (
-                    <Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" />
+          <Skeleton
-                ) : (
+            variant="circular"
-                    <Image
+            className="!min-w-[40px] !min-h-[40px]"
-                        className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
+          />
-                        src={data.profile}
+        ) : (
-                        width={40}
+          <Image
-                        height={40}
+            className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
-                        alt="profile"
+            src={data.profile}
-                    />
+            width={40}
-                )}
+            height={40}
-                <div className="flex flex-col items-start justify-center gap-[8px]">
+            alt="profile"
-                    {loading ? (
+          />
-                        <Skeleton variant="text" className="!min-w-[70px]" />
+        )}
-                    ) : (
+        <div className="flex flex-col items-start justify-center gap-[8px]">
-                        <>
+          {loading ? (
-                            <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
+            <Skeleton variant="text" className="!min-w-[70px]" />
-                            <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p>
+          ) : (
-                        </>
+            <>
-                    )}
+              <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
-                </div>
+                {data.name}
+              </p>
+              <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
+                3 روز پیش
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="mt-2">
+        {loading ? (
+          <>
+            <Skeleton variant="text" className="!w-full !mt-8" />
+            <Skeleton variant="text" className="!w-1/3" />
+          </>
+        ) : (
+          <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
+            {data.comment}
+          </p>
+        )}
+        <div className="flex items-center justify-start mt-2 gap-[28px]">
+          <div className="flex items-center justify-start gap-1">
+            <div
+              className="cursor-pointer"
+              onClick={() =>
+                handleLike(
+                  data.is_like ? data.like - 1 : data.like + 1,
+                  data,
+                  "like",
+                  "is_like"
+                )
+              }
+            >
+              {data.is_like ? <BoldLikeComment /> : <LikeComment />}
             </div>
-            <div className="mt-2">
+            {loading ? (
-                {loading ? (
+              <Skeleton variant="text" className="!min-w-[8px]" />
-                    <>
+            ) : (
-                        <Skeleton variant="text" className="!w-full !mt-8" />
+              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                        <Skeleton variant="text" className="!w-1/3" />
+                {data.like}
-                    </>
+              </p>
-                ) : (
+            )}
-                    <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
+          </div>
-                )}
+          <div className="flex items-center justify-start gap-1">
-                <div className="flex items-center justify-start mt-2 gap-[28px]">
+            <div
-                    <div className="flex items-center justify-start gap-1">
+              className="cursor-pointer"
-                        <div
+              onClick={() =>
-                            className="cursor-pointer"
+                handleLike(
-                            onClick={() =>
+                  data.is_dislike ? data.dislike - 1 : data.dislike + 1,
-                                handleLike(data.is_like ? data.like - 1 : data.like + 1, data, 'like', 'is_like')
+                  data,
-                            }
+                  "dislike",
-                        >
+                  "is_dislike"
-                            {data.is_like ? (
+                )
-                                <BoldLikeComment />
+              }
-                            ) : (
+            >
-                                <LikeComment />
+              {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
-                            )}
+            </div>
-                        </div>
+            {loading ? (
-                        {loading ? (
+              <Skeleton variant="text" className="!min-w-[8px]" />
-                            <Skeleton variant="text" className="!min-w-[8px]" />
+            ) : (
-                        ) : (
+              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                            <p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p>
+                {data.dislike}
-                        )}
+              </p>
-                    </div>
+            )}
-                    <div className="flex items-center justify-start gap-1">
+          </div>
-                        <div
+          <Button
-                            className="cursor-pointer"
+            className="!text-[#495057] !text-[12px] !font-medium"
-                            onClick={() =>
+            onClick={() => {
-                                handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike')
+              data.is_open_answer = !data.is_open_answer;
-                            }
+              setUpdate(!update);
-                        >
+            }}
-                            {data.is_dislike ? (
+            variant="text"
-                                <BoldDisLikeComment />
+          >
-                            ) : (
+            پاسخ
-                                <DisLikeComment />
+          </Button>
-                            )}
+        </div>
-                        </div>
+        <div
-                        {loading ? (
+          className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
-                            <Skeleton variant="text" className="!min-w-[8px]" />
+          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
-                        ) : (
+        >
-                            <p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p>
+          <Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
-                        )}
+          <Button
-                    </div>
+            variant="contained"
-                    <Button
+            className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE] 
-                        className="!text-[#495057] !text-[12px] !font-medium"
-                        onClick={() => {
-                            data.is_open_answer = !data.is_open_answer;
-                            setUpdate(!update);
-                        }}
-                        variant="text"
-                    >پاسخ</Button>
-                </div>
-                <div
-                    className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
-          ${data.is_open_answer ? 'max-h-fit' : 'max-h-0'}`}
-                >
-                    <Field
-                        type='text'
-                        title='پاسخ شما...'
-                        isPlaceHolder={true}
-                    />
-                    <Button
-                        variant="contained"
-                        className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE] 
                 !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
-                    >
+          >
-                        ارسال پاسخ
+            ارسال پاسخ
-                    </Button>
+          </Button>
-                </div>
+        </div>
-                {!!data.replays.length && (
+        {!!data.replays.length && (
-                    <div className="flex items-center justify-start gap-1 my-2">
+          <div className="flex items-center justify-start gap-1 my-2">
-                        <Button
+            <Button
-                            className="!text-[#0FA1B3] !text-[12px] !font-medium"
+              className="!text-[#0FA1B3] !text-[12px] !font-medium"
-                            onClick={() => {
+              onClick={() => {
-                                data.is_open_reply = !data.is_open_reply;
+                data.is_open_reply = !data.is_open_reply;
-                                setUpdate(!update);
+                setUpdate(!update);
-                            }}
+              }}
-                        >
+            >
-                            مشاهده پاسخ ها ({data.replays.length})
+              مشاهده پاسخ ها ({data.replays.length})
-                            <div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
+              <div
-                                <ArrowUpComment />
+                className={`!mr-1 ${
-                            </div>
+                  data.is_open_reply ? "!rotate-0" : "!rotate-180"
-                        </Button>
+                }`}
-                    </div>
+              >
-                )}
+                <ArrowUpComment />
-                <ul
+              </div>
-                    className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
+            </Button>
-                    ${loading && 'w-full'}
+          </div>
-                    ${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
+        )}
-                >
+        <ul
-                    {data.replays.map((item, idx) => (
+          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
-                        <ItemUser
+                    ${loading && "w-full"}
-                            key={idx}
+                    ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
-                            data={item}
+        >
-                            isReply={true}
+          {data.replays.map((item, idx) => (
-                            update={update}
+            <ItemUser
-                            loading={loading}
+              key={idx}
-                            setUpdate={setUpdate}
+              data={item}
-                        />
+              isReply={true}
-                    ))}
+              update={update}
-                </ul>
+              loading={loading}
-            </div>
+              setUpdate={setUpdate}
-        </li>
+            />
-    )
+          ))}
+        </ul>
+      </div>
+    </li>
+  );
 }
 
-export default ItemUser
+export default ItemUser;

app/component/comment/index.js

@@ -1,27 +1,32 @@
-'use client';
+"use client";
-import { useState } from 'react';
+import { useState } from "react";
-import ItemUser from './ItemUser'
+import ItemUser from "./ItemUser";
 
 function Comment({ data, loading }) {
+  const [list, setList] = useState(data.comments);
+  const [update, setUpdate] = useState(false);
 
-    const [list, setList] = useState(data.comments);
+  return (
-    const [update, setUpdate] = useState(false);
+    <ul
-
+      className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${
-    return (
+        false && "w-full"
-        <ul className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
+      }`}
-            {data && !!data.comments.length && data.comments.map((item, idx) => (
+    >
-                <ItemUser
+      {data &&
-                    key={idx}
+        !!data.comments.length &&
-                    list={list}
+        data.comments.map((item, idx) => (
-                    data={item}
+          <ItemUser
-                    update={update}
+            key={idx}
-                    setList={setList}
+            list={list}
-                    loading={loading}
+            data={item}
-                    setUpdate={setUpdate}
+            update={update}
-                />
+            setList={setList}
-            ))}
+            loading={loading}
-        </ul>
+            setUpdate={setUpdate}
-    )
+          />
+        ))}
+    </ul>
+  );
 }
 
 export default Comment;

app/component/date/datePicker/ButtonDate.js

@@ -1,16 +1,16 @@
-import { Button as ButtonMUI } from '@mui/material'
+import { Button as ButtonMUI } from "@mui/material";
-import React from 'react'
+import React from "react";
 
 function ButtonDate({ handleClick, id, text }) {
-    return (
+  return (
-        <ButtonMUI
+    <ButtonMUI
-            onClick={handleClick}
+      onClick={handleClick}
-            aria-describedby={id}
+      aria-describedby={id}
-            className="!border-[#E9ECEF] !text-[#6C757D]"
+      className="!border-[#E9ECEF] !text-[#6C757D]"
-        >
+    >
-            {text}
+      {text}
-        </ButtonMUI>
+    </ButtonMUI>
-    )
+  );
 }
 
-export default ButtonDate
+export default ButtonDate;

app/component/date/datePicker/Field.js

@@ -1,32 +1,38 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
 
 function Field({ title, handleClick }) {
-    return (
+  return (
-        <div className="relative">
+    <div className="relative">
-            <TextField
+      <TextField
-                label={title}
+        label={title}
-                className="!w-full !mx-auto !bg-[#FFF]"
+        className="!w-full !mx-auto !bg-[#FFF]"
-                sx={{
+        sx={{
-                    borderRadius: '8px !important',
+          borderRadius: "8px !important",
-                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
+          "& .MuiFormLabel-root": {
-                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
+            transform: "translate(16px, 50%) scale(1) !important",
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+          },
-                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
+          "& .MuiInputLabel-shrink": {
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+            transform: "translate(14px, -9px) scale(0.75) !important",
-                    ".Mui-focused": {
+          },
-                        '& .MuiOutlinedInput-notchedOutline': {
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                            border: '1px solid #0FA1B3 !important',
+          "& .MuiInputBase-root": { borderRadius: "8px !important" },
-                            transition: '0.5s all'
+          "& .MuiOutlinedInput-notchedOutline": {
-                        }
+            border: "1px solid #E9ECEF !important",
-                    }
+          },
-                }}
+          ".Mui-focused": {
-            />
+            "& .MuiOutlinedInput-notchedOutline": {
-            <span
+              border: "1px solid #0FA1B3 !important",
-                className="absolute cursor-pointer left-0 top-0 w-full h-full"
+              transition: "0.5s all",
-                onClick={handleClick}
+            },
-            ></span>
+          },
-        </div>
+        }}
-    )
+      />
+      <span
+        className="absolute cursor-pointer left-0 top-0 w-full h-full"
+        onClick={handleClick}
+      ></span>
+    </div>
+  );
 }
 
-export default Field
+export default Field;

app/component/date/datePicker/index.js

@@ -1,98 +1,97 @@
-'use client';
+"use client";
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
-import Image from 'next/image';
+import Image from "next/image";
-import { Button, Skeleton } from '@mui/material';
+import { Button, Skeleton } from "@mui/material";
 
 function DatePicker({ date, updateDate }) {
+  const nextIconDatePicker = useRef();
 
-    const nextIconDatePicker = useRef();
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState();
+  const [loading, setLoading] = useState(true);
 
-    const [startDate, setStartDate] = useState(null);
+  const handleStartDateChange = (date) => {
-    const [endDate, setEndDate] = useState();
+    if (date) {
-    const [loading, setLoading] = useState(true);
+      setStartDate(date);
-
+      setEndDate(null); // Clear end date if start date is selected
-    const handleStartDateChange = (date) => {
+      // updateDate(date); // Notify parent about the selected date
-        if (date) {
-            setStartDate(date);
-            setEndDate(null); // Clear end date if start date is selected
-            // updateDate(date); // Notify parent about the selected date
-        }
-    };
-
-    const handleEndDateChange = (date) => {
-        if (date) {
-            setEndDate(date);
-            setStartDate(null); // Clear start date if end date is selected
-            // updateDate(date); // Notify parent about the selected date
-        }
-    };
-
-    const handleDisableDate = e => {
-        const today = new Date();
-        return today >= e._d
     }
+  };
 
-    useEffect(() => {
+  const handleEndDateChange = (date) => {
-        if (nextIconDatePicker.current) {
+    if (date) {
-            nextIconDatePicker.current.click()
+      setEndDate(date);
-            setLoading(false)
+      setStartDate(null); // Clear start date if end date is selected
-        }
+      // updateDate(date); // Notify parent about the selected date
-    }, [nextIconDatePicker])
+    }
+  };
 
-    return (
+  const handleDisableDate = (e) => {
-        <div className='flex items-start justify-evenly w-full'>
+    const today = new Date();
-            <div className='w-1/2 relative flex justify-center'>
+    return today >= e._d;
-                <DatePickerJalali
+  };
-                    value={startDate}
+
-                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
+  useEffect(() => {
-                    timePicker={false}
+    if (nextIconDatePicker.current) {
-                    onChange={handleStartDateChange}
+      nextIconDatePicker.current.click();
-                    disabledDates={e => handleDisableDate(e)}
+      setLoading(false);
+    }
+  }, [nextIconDatePicker]);
+
+  return (
+    <div className="flex items-start justify-evenly w-full">
+      <div className="w-1/2 relative flex justify-center">
+        <DatePickerJalali
+          value={startDate}
+          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+          timePicker={false}
+          onChange={handleStartDateChange}
+          disabledDates={(e) => handleDisableDate(e)}
+        />
+        {loading && (
+          <Skeleton
+            variant="rectangular"
+            className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
+            height={352}
+          />
+        )}
+      </div>
+      <div className="w-1/2 hidden md:flex lg:hidden xl:flex">
+        <div className="w-full relative flex justify-center">
+          <DatePickerJalali
+            value={endDate}
+            timePicker={false}
+            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+            nextIcon={
+              <Button
+                className="!min-w-0 !p-0 !rounded-full"
+                ref={nextIconDatePicker}
+                onClick={(e) => e.preventDefault()}
+              >
+                <Image
+                  src="/assets/icons/arrow-right.svg"
+                  className="icon-left-datepicker"
+                  height={24}
+                  width={24}
                 />
-                {loading && (
+              </Button>
-                    <Skeleton
+            }
-                        variant="rectangular"
+            onChange={handleEndDateChange}
-                        className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
+            disabledDates={(e) => handleDisableDate(e)}
-                        height={352}
+          />
-                    />
+          {loading && (
-                )}
+            <Skeleton
-            </div>
+              variant="rectangular"
-            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
-                <div className='w-full relative flex justify-center'>
+              height={352}
-                    <DatePickerJalali
+            />
-                        value={endDate}
+          )}
-                        timePicker={false}
-                        className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
-                        nextIcon={
-                            <Button
-                                className='!min-w-0 !p-0 !rounded-full'
-                                ref={nextIconDatePicker}
-                                onClick={e => e.preventDefault()}
-                            >
-                                <Image
-                                    src='/assets/icons/arrow-right.svg'
-                                    className='icon-left-datepicker'
-                                    height={24}
-                                    width={24}
-                                />
-                            </Button>
-                        }
-                        onChange={handleEndDateChange}
-                        disabledDates={e => handleDisableDate(e)}
-                    />
-                    {loading && (
-                        <Skeleton
-                            variant="rectangular"
-                            className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
-                            height={352}
-                        />
-                    )}
-                </div>
-            </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default DatePicker;

app/component/date/dateTime/Hours.js

@@ -1,32 +1,32 @@
 import { Button } from "@mui/material";
 
 function Hours({ doctor, hour, setHour, value, nameHours }) {
-    return (
+  return (
-        <ul
+    <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
-            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]"
+      {doctor[nameHours[value]].map((item, idx) => (
-        >
+        <li key={idx}>
-            {doctor[nameHours[value]].map((item, idx) => (
+          <Button
-                <li
+            onClick={() => setHour(idx)}
-                    key={idx}
+            disabled={!item.active}
-                >
+            className={`
-                    <Button
-                        onClick={() => setHour(idx)}
-                        disabled={!item.active}
-                        className={`
                         !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
-                        ${idx === hour ? '!bg-[#F79463] ' : ''}
+                        ${idx === hour ? "!bg-[#F79463] " : ""}
                     `}
-                    >
+          >
-                        <p className={`
+            <p
+              className={`
                         text-[16px] font-semibold text-[#525252]
-                        ${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
+                        ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
-                        ${idx === hour ? '!text-[#FAFAFA] ' : ''}
+                        ${idx === hour ? "!text-[#FAFAFA] " : ""}
-                    `}>{item.hour}</p>
+                    `}
-                    </Button>
+            >
-                </li>
+              {item.hour}
-            ))}
+            </p>
-        </ul>
+          </Button>
-    )
+        </li>
+      ))}
+    </ul>
+  );
 }
 
 export default Hours;

app/component/date/dateTime/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useState } from "react";
 import Hours from "./Hours";
@@ -6,11 +6,10 @@ import Tabs from "../../Tabs";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
 
-const listTab = ['صبح', 'بعد از ظهر'];
+const listTab = ["صبح", "بعد از ظهر"];
-const nameHours = ['hours_morning', 'hours_afternoon']
+const nameHours = ["hours_morning", "hours_afternoon"];
 
 function DateTime({ doctor, setStep, setIsError, locateVisit }) {
-
   const [value, setValue] = useState(0);
   const [hour, setHour] = useState(0);
 
@@ -21,21 +20,21 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
       <Tabs
         isSm={true}
         style={{
-          '.MuiTabs-indicator': {
+          ".MuiTabs-indicator": {
-            height: '4px',
+            height: "4px",
-            borderRadius: '8px',
+            borderRadius: "8px",
-            background: '#F17732'
+            background: "#F17732",
           },
-          '& .MuiTabs-flexContainer': {
+          "& .MuiTabs-flexContainer": {
-            borderBottom: '2px solid #EFEFEF',
+            borderBottom: "2px solid #EFEFEF",
-            marginBottom: '1px'
+            marginBottom: "1px",
           },
-          '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
+          "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
-            color: '#F17732 !important'
+            color: "#F17732 !important",
+          },
+          "& .MuiButtonBase-root.Mui-selected": {
+            color: "#F17732 !important",
           },
-          '& .MuiButtonBase-root.Mui-selected': {
-            color: '#F17732 !important'
-          }
         }}
         value={value}
         listTab={listTab}
@@ -53,8 +52,8 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
           className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
           onClick={() => {
             if (locateVisit) {
-              localStorage.setItem('doctor-id', doctor?.id);
+              localStorage.setItem("doctor-id", doctor?.id);
-              setStep(prev => prev + 1);
+              setStep((prev) => prev + 1);
             } else {
               setIsError(true);
             }
@@ -66,7 +65,7 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
         </Button>
       </div>
     </div>
-  )
+  );
 }
 
-export default DateTime
+export default DateTime;

app/component/element/AutoCompleteSelect.js

@@ -3,63 +3,61 @@ import { Autocomplete, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
 function AutoCompleteSelect({ list, isError, updateData, name, label }) {
-    return (
+  return (
-        <Autocomplete
+    <Autocomplete
-            disablePortal
+      disablePortal
-            options={list}
+      options={list}
-            className="!w-full !rounded-lg"
+      className="!w-full !rounded-lg"
-            onChange={(event) =>
+      onChange={(event) => updateData && updateData(event, name)}
-                updateData &&
+      sx={{
-                updateData(event, name)
+        ...styleTextSelectRight,
-            }
+        // Hide Icon Number
-            sx={{
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-                ...styleTextSelectRight,
+          {
-                // Hide Icon Number
+            display: "none",
-                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+          },
-                    display: 'none'
+        "& input[type=number]": {
-                },
+          MozAppearance: "textfield",
-                '& input[type=number]': {
+        },
-                    MozAppearance: 'textfield'
+        "& .MuiInputBase-root": {
-                },
+          borderRadius: 2,
-                '& .MuiInputBase-root': {
+          padding: "5px 16px !important",
-                    borderRadius: 2,
+        },
-                    padding: '5px 16px !important'
+        "& .MuiOutlinedInput-notchedOutline": {
-                },
+          border: "1px solid #D7D7D7",
-                '& .MuiOutlinedInput-notchedOutline': {
+        },
-                    border: '1px solid #D7D7D7'
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
-                },
+          {
-                '& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': {
+            borderColor: "#D7D7D7 !important",
-                    borderColor: "#D7D7D7 !important"
+          },
-                },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
-                '& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
+          {
-                    border: '1px solid #5559CE !important'
+            border: "1px solid #5559CE !important",
-                },
+          },
-                '& .MuiOutlinedInput-notchedOutline': {
+        "& .MuiOutlinedInput-notchedOutline": {
-                    border: isError ? '1px solid red !important' : ''
+          border: isError ? "1px solid red !important" : "",
-                }
+        },
-            }}
+      }}
-            renderInput={params =>
+      renderInput={(params) => (
-                <TextField
+        <TextField
-                    fullWidth
+          fullWidth
-                    {...params}
+          {...params}
-                    InputProps={{
+          InputProps={{
-                        ...params.InputProps,
+            ...params.InputProps,
-                        endAdornment: (
+            endAdornment: (
-                            <div
+              <div className="absolute left-4">
-                                className="absolute left-4"
+                <BottomSelect />
-                            >
+              </div>
-                                <BottomSelect />
+            ),
-                            </div>
+          }}
-                        )
+          placeholder={label}
-                    }}
+          sx={{
-                    placeholder={label}
+            borderRadius: "8px",
-                    sx={{
+          }}
-                        borderRadius: '8px'
-                    }}
-                />
-            }
         />
-    )
+      )}
+    />
+  );
 }
 
-export default AutoCompleteSelect
+export default AutoCompleteSelect;

app/component/element/Field.js

@@ -1,35 +1,38 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
-import { styleTextSelectRight } from "@/mui"
+import { styleTextSelectRight } from "@/mui";
 
 function Field({ title, type, isPlaceHolder }) {
-    return (
+  return (
-        <TextField
+    <TextField
-            label={title}
+      label={title}
-            dir="rtl"
+      dir="rtl"
-            type={type || 'text'}
+      type={type || "text"}
-            className="!w-full !mx-auto !bg-[#FFF]"
+      className="!w-full !mx-auto !bg-[#FFF]"
-            sx={{
+      sx={{
-                ...styleTextSelectRight,
+        ...styleTextSelectRight,
-                // Hide Icon Number
+        // Hide Icon Number
-                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-                    display: 'none'
+          {
-                },
+            display: "none",
-                '& input[type=number]': {
+          },
-                    MozAppearance: 'textfield'
+        "& input[type=number]": {
-                },
+          MozAppearance: "textfield",
+        },
 
-                '& .MuiInputBase-input': { padding: '12.5px 14px' },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
-                '& .MuiInputBase-root': { borderRadius: '6px !important' },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
-                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+        "& .MuiOutlinedInput-notchedOutline": {
-                ".Mui-focused": {
+          border: "1px solid #E9ECEF !important",
-                    '& .MuiOutlinedInput-notchedOutline': {
+        },
-                        border: '1px solid #0FA1B3 !important',
+        ".Mui-focused": {
-                        transition: '0.5s all'
+          "& .MuiOutlinedInput-notchedOutline": {
-                    }
+            border: "1px solid #0FA1B3 !important",
-                }
+            transition: "0.5s all",
-            }}
+          },
-        />
+        },
-    )
+      }}
+    />
+  );
 }
 
-export default Field
+export default Field;

app/component/head/index.js

@@ -1,17 +1,23 @@
 function HeadPageList({ children, title, detail }) {
-    return (
+  return (
-        <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
+    <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
-            <div className="
+      <div
+        className="
                 padding-responsive flex flex-col items-center gap-[25px]
                 pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
                 pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
-            ">
+            "
-                <p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">{title}</p>
+      >
-                <p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">{detail}</p>
+        <p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">
-                {children}
+          {title}
-            </div>
+        </p>
-        </div>
+        <p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">
-    )
+          {detail}
+        </p>
+        {children}
+      </div>
+    </div>
+  );
 }
 
-export default HeadPageList
+export default HeadPageList;

app/component/loading/Circular.js

@@ -1,13 +1,11 @@
-import { Skeleton } from '@mui/material'
+import { Skeleton } from "@mui/material";
 
 function CircularLoading({ loading, width, height, children }) {
-    return loading ? (
+  return loading ? (
-        <Skeleton
+    <Skeleton variant="circular" height={height} width={width} />
-            variant="circular"
+  ) : (
-            height={height}
+    children
-            width={width}
+  );
-        />
-    ) : children
 }
 
-export default CircularLoading
+export default CircularLoading;

app/component/loading/Custom.js

@@ -1,14 +1,16 @@
-import { Skeleton } from "@mui/material"
+import { Skeleton } from "@mui/material";
 
 function CustomLoading({ width, height, children, loading }) {
-    return loading ? (
+  return loading ? (
-        <Skeleton
+    <Skeleton
-            className={width === 'full' ? '!w-full' : ''}
+      className={width === "full" ? "!w-full" : ""}
-            height={height}
+      height={height}
-            variant="rounded"
+      variant="rounded"
-            width={width}
+      width={width}
-        />
+    />
-    ) : children
+  ) : (
+    children
+  );
 }
 
-export default CustomLoading
+export default CustomLoading;

app/component/loading/Multiline.js

@@ -1,14 +1,18 @@
-import { Skeleton } from "@mui/material"
+import { Skeleton } from "@mui/material";
 
 function MultilineLoading({ loading, width, height, children, line }) {
-    return loading ? Array(line).fill({}).map(_ => (
+  return loading
-        <Skeleton
+    ? Array(line)
-            className={`${width === 'full' ? '!w-full' : ''} !my-2`}
+        .fill({})
+        .map((_) => (
+          <Skeleton
+            className={`${width === "full" ? "!w-full" : ""} !my-2`}
             variant="rounded"
             height={height}
             width={width}
-        />
+          />
-    )) : children
+        ))
+    : children;
 }
 
-export default MultilineLoading
+export default MultilineLoading;

app/component/loading/Text.js

@@ -1,14 +1,16 @@
-import { Skeleton } from '@mui/material'
+import { Skeleton } from "@mui/material";
 
 function TextLoading({ loading, width, height, children }) {
-    return loading ? (
+  return loading ? (
-        <Skeleton
+    <Skeleton
-            className={width === 'full' ? '!w-full' : ''}
+      className={width === "full" ? "!w-full" : ""}
-            variant="rounded"
+      variant="rounded"
-            height={height}
+      height={height}
-            width={width}
+      width={width}
-        />
+    />
-    ) : children
+  ) : (
+    children
+  );
 }
 
-export default TextLoading
+export default TextLoading;

app/component/openLocation/Content.js

@@ -1,40 +1,44 @@
-import CloseModalD from '@/components/icons/CloseModalD'
+import CloseModalD from "@/components/icons/CloseModalD";
-import Image from 'next/image'
+import Image from "next/image";
 
 const maps = [
-    { src: '/assets/images/snapp.png', name: 'snapp' },
+  { src: "/assets/images/snapp.png", name: "snapp" },
-    { src: '/assets/images/tapsi.png', name: 'tapsi' },
+  { src: "/assets/images/tapsi.png", name: "tapsi" },
-    { src: '/assets/images/maps.png', name: 'maps' },
+  { src: "/assets/images/maps.png", name: "maps" },
-    { src: '/assets/images/balad.png', name: 'balad' },
+  { src: "/assets/images/balad.png", name: "balad" },
-    { src: '/assets/images/waze.png', name: 'waze' }
+  { src: "/assets/images/waze.png", name: "waze" },
-]
+];
 
 function Content({ handleClose }) {
-    return (
+  return (
-        <>
+    <>
-            <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between">
-                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
+        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
-                <div className="cursor-pointer" onClick={handleClose}>
+          باز شدن با
-                    <CloseModalD />
+        </p>
-                </div>
+        <div className="cursor-pointer" onClick={handleClose}>
-            </div>
+          <CloseModalD />
-            <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
+        </div>
-            <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
+      </div>
-                {maps.map((item, idx) => (
+      <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
-                    <li className="flex items-center flex-col justify-center gap-1">
+      <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
-                        <Image
+        {maps.map((item, idx) => (
-                            className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
+          <li className="flex items-center flex-col justify-center gap-1">
-                            src={item.src}
+            <Image
-                            alt="icon app"
+              className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
-                            height={40}
+              src={item.src}
-                            width={40}
+              alt="icon app"
-                        />
+              height={40}
-                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
+              width={40}
-                    </li>
+            />
-                ))}
+            <p className="text-[#3B3B3B] font-normal text-[14px]">
-            </ul>
+              {item.name}
-        </>
+            </p>
-    )
+          </li>
+        ))}
+      </ul>
+    </>
+  );
 }
 
-export default Content
+export default Content;

app/component/openLocation/index.js

@@ -1,52 +1,45 @@
-'use client';
+"use client";
 
 import { Drawer, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import Content from "./Content";
 
 function ModalOpenLocation({ open, setOpen, handleClose, children }) {
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };
 
-    const toggleDrawer = (newOpen) => () => {
+  return (
-        setOpen(newOpen);
+    <>
-    };
+      {/* Button Modal */}
-
+      {children}
-    return (
+      {/* Content Modal */}
-        <>
+      <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
-            {/* Button Modal */}
+        <div
-            {children}
+          style={styleDefault}
-            {/* Content Modal */}
+          className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
-            <Modal
+        >
-                open={open}
+          <Content onClose={handleClose} />
-                onClose={handleClose}
+        </div>
-                className="!hidden md:!flex"
+      </Modal>
-            >
+      <Drawer
-                <div
+        open={open}
-                    style={styleDefault}
+        anchor="bottom"
-                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
+        onClose={toggleDrawer(false)}
-                >
+        className="!flex md:!hidden"
-                    <Content onClose={handleClose} />
+        sx={{
-                </div>
+          "& .MuiPaper-root": {
-            </Modal>
+            borderRadius: "25px 25px 0px 0px !important",
-            <Drawer
+            overflow: "hidden",
-                open={open}
+          },
-                anchor="bottom"
+        }}
-                onClose={toggleDrawer(false)}
+      >
-                className="!flex md:!hidden"
+        <div className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]">
-                sx={{
+          <Content handleClose={handleClose} />
-                    '& .MuiPaper-root': {
+        </div>
-                        borderRadius: '25px 25px 0px 0px !important',
+      </Drawer>
-                        overflow: 'hidden'
+    </>
-                    }
+  );
-                }}
-            >
-                <div
-                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
-                >
-                    <Content handleClose={handleClose} />
-                </div>
-            </Drawer>
-        </>
-    )
 }
 
-export default ModalOpenLocation
+export default ModalOpenLocation;

app/contact-us/page.js

@@ -1,12 +1,12 @@
-import ContactUsPage from '@/components/contactUs';
+import ContactUsPage from "@/components/contactUs";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
 
 function ContactUs() {
-    return (
+  return (
-        <Layout title='تماس با ما' name='contact-us'>
+    <Layout title="تماس با ما" name="contact-us">
-            <ContactUsPage />
+      <ContactUsPage />
-        </Layout>
+    </Layout>
-    )
+  );
 }
 
-export default ContactUs
+export default ContactUs;

app/dashboard/not-found.js

@@ -1,12 +1,12 @@
-import Layout from '@/components/layout'
+import Layout from "@/components/layout";
-import NotFoundPage from '@/components/notFound'
+import NotFoundPage from "@/components/notFound";
 
 function NotFound() {
   return (
-    <Layout title='404' disableFooter={true}>
+    <Layout title="404" disableFooter={true}>
       <NotFoundPage />
     </Layout>
-  )
+  );
 }
 
-export default NotFound
+export default NotFound;

app/dashboard/page.js

@@ -1,38 +1,37 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
+import { useState } from "react";
 
-import userData from '@/data/userData.json';
+import userData from "@/data/userData.json";
 import DashboardPage from "@/components/dashboard";
 import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
 
 function UserAccount() {
+  const [value, setValue] = useState(0);
+  const [isOpenSide, setIsOpenSide] = useState(false);
+  const [isTurnsDetails, setIsTurnsDetails] = useState(false);
 
-    const [value, setValue] = useState(0);
+  return (
-    const [isOpenSide, setIsOpenSide] = useState(false);
+    <DashboardPage
-    const [isTurnsDetails, setIsTurnsDetails] = useState(false);
+      value={value}
-
+      setValue={setValue}
-    return (
+      user={userData.data}
-        <DashboardPage
+      isOpenSide={isOpenSide}
-            value={value}
+      setIsOpenSide={setIsOpenSide}
-            setValue={setValue}
+      isTurnsDetails={isTurnsDetails}
-            user={userData.data}
+      setIsTurnsDetails={setIsTurnsDetails}
-            isOpenSide={isOpenSide}
+    >
-            setIsOpenSide={setIsOpenSide}
+      <UserAccountPage
-            isTurnsDetails={isTurnsDetails}
+        value={value}
-            setIsTurnsDetails={setIsTurnsDetails}
+        setValue={setValue}
-        >
+        user={userData.data}
-            <UserAccountPage
+        isOpenSide={isOpenSide}
-                value={value}
+        setIsOpenSide={setIsOpenSide}
-                setValue={setValue}
+        isTurnsDetails={isTurnsDetails}
-                user={userData.data}
+        setIsTurnsDetails={setIsTurnsDetails}
-                isOpenSide={isOpenSide}
+      />
-                setIsOpenSide={setIsOpenSide}
+    </DashboardPage>
-                isTurnsDetails={isTurnsDetails}
+  );
-                setIsTurnsDetails={setIsTurnsDetails}
-            />
-        </DashboardPage>
-    )
 }
 
-export default UserAccount
+export default UserAccount;

app/doctor/[slug]/page.js

@@ -1,16 +1,15 @@
 import DoctorPage from "@/components/doctor";
-import doctors from '@/data/doctors.json';
+import doctors from "@/data/doctors.json";
 import Layout from "@/components/layout";
 
 function Doctor({ params: { slug } }) {
+  const doctor = doctors.find((item) => item.id === +slug);
 
-    const doctor = doctors.find(item => item.id === +slug);
+  return (
-
+    <Layout title="دکتر ها">
-    return (
+      <DoctorPage doctor={doctor} />
-        <Layout title='دکتر ها'>
+    </Layout>
-            <DoctorPage doctor={doctor} />
+  );
-        </Layout>
-    )
 }
 
-export default Doctor
+export default Doctor;

app/doctors/page.js

@@ -1,12 +1,12 @@
-import DoctorsPage from '@/components/doctors';
+import DoctorsPage from "@/components/doctors";
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
 
 function Doctors() {
   return (
-    <Layout title='دکتر ها'>
+    <Layout title="دکتر ها">
       <DoctorsPage />
     </Layout>
-  )
+  );
 }
 
-export default Doctors
+export default Doctors;

app/globals.css

@@ -5,146 +5,146 @@
 /* Font Irans Sans X */
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
-    font-weight: 100;
+  font-weight: 100;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
-    font-weight: 200;
+  font-weight: 200;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
-    font-weight: 300;
+  font-weight: 300;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
-    font-weight: 400;
+  font-weight: 400;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
-    font-weight: 500;
+  font-weight: 500;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
-    font-weight: 600;
+  font-weight: 600;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
-    font-weight: 700;
+  font-weight: 700;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
-    font-weight: 800;
+  font-weight: 800;
 }
 
 @font-face {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
+  src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
-    font-weight: 900;
+  font-weight: 900;
 }
 
 /* Font Kalame */
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
-    font-weight: 100;
+  font-weight: 100;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
-    font-weight: 200;
+  font-weight: 200;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
-    font-weight: 300;
+  font-weight: 300;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
-    font-weight: 400;
+  font-weight: 400;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
-    font-weight: 500;
+  font-weight: 500;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
-    font-weight: 600;
+  font-weight: 600;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
-    font-weight: 700;
+  font-weight: 700;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
-    font-weight: 800;
+  font-weight: 800;
 }
 
 @font-face {
-    font-family: kalame;
+  font-family: kalame;
-    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
+  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
-    font-weight: 900;
+  font-weight: 900;
 }
 
 body {
-    font-family: iran-sans;
+  font-family: iran-sans;
-    padding: 0;
+  padding: 0;
-    margin: 0;
+  margin: 0;
-    background: #FAFAFA;
+  background: #fafafa;
 }
 
 /* Scroll */
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 ::-webkit-scrollbar {
-    width: 7px;
+  width: 7px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #F1F1F1;
+  background: #f1f1f1;
-    height: 50px;
+  height: 50px;
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #C1C1C1;
+  background: #c1c1c1;
-    height: 50px;
+  height: 50px;
-    border-radius: 20px;
+  border-radius: 20px;
 }
 
 .font-kalame {
-    font-family: kalame;
+  font-family: kalame;
 }
 
 /* .bg-banner-home,
@@ -155,317 +155,322 @@ html {
 } */
 
 .bg-border-t-gradient-sign {
-    background: linear-gradient(90deg, #E5E5E5 0%, #BABABA 48.5%, #E5E5E5 100%);
+  background: linear-gradient(90deg, #e5e5e5 0%, #bababa 48.5%, #e5e5e5 100%);
 }
 
 .bg-banner-home {
-    background: url(../public/assets/images/banner-home.png);
+  background: url(../public/assets/images/banner-home.png);
-    position: relative;
+  position: relative;
 }
 
 .bg-banner-footer {
-    background: url(../public/assets/images/banner-footer.png);
+  background: url(../public/assets/images/banner-footer.png);
 }
 
 .bg-banner-about {
-    background: url(../public/assets/images/banner-about.png);
+  background: url(../public/assets/images/banner-about.png);
 }
 
 .bg-head-dashboard {
-    background: url(../public/assets/images/bg-head-dashboard.png);
+  background: url(../public/assets/images/bg-head-dashboard.png);
 }
 
 .bg-banner-home::after,
 .bg-banner-stroke::after {
-    content: "";
+  content: "";
-    position: absolute;
+  position: absolute;
-    right: 0;
+  right: 0;
-    top: 0;
+  top: 0;
-    width: 100%;
+  width: 100%;
-    height: 40%;
+  height: 40%;
-    background: url(../public/assets/images/banner-register.png);
+  background: url(../public/assets/images/banner-register.png);
-    background-size: cover !important;
+  background-size: cover !important;
-    background-repeat: no-repeat !important;
+  background-repeat: no-repeat !important;
-    background-position: center !important;
+  background-position: center !important;
-    z-index: -10;
+  z-index: -10;
 }
 
 .bg-banner-register {
-    background: url(../public/assets/images/banner-register.png);
+  background: url(../public/assets/images/banner-register.png);
 }
 
 .animate-open {
-    animation: openx;
+  animation: openx;
-    animation-duration: 2s;
+  animation-duration: 2s;
 }
 
 .hover-mode-item-speciality:hover p:first-child {
-    color: #FAFAFA;
+  color: #fafafa;
 }
 
 .hover-mode-item-speciality:hover p:last-child {
-    color: #EFEFEF;
+  color: #efefef;
 }
 
 .cover-head-blogs {
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.07) 31.47%, rgba(0, 0, 0, 0.31) 59.72%, rgba(0, 0, 0, 0.70) 89.39%);
+  background: linear-gradient(
-    border-radius: 16px;
+    180deg,
-    position: relative;
+    rgba(0, 0, 0, 0) 0%,
-    overflow: hidden;
+    rgba(0, 0, 0, 0.07) 31.47%,
+    rgba(0, 0, 0, 0.31) 59.72%,
+    rgba(0, 0, 0, 0.7) 89.39%
+  );
+  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
 }
 
 .cover-head-blogs img {
-    width: 100%;
+  width: 100%;
 }
 
 .cover-head-blogs p {
-    position: absolute;
+  position: absolute;
-    bottom: 32px;
+  bottom: 32px;
-    color: #FAFAFA;
+  color: #fafafa;
-    font-weight: 700;
+  font-weight: 700;
 }
 
 @keyframes openx {
-    0% {
+  0% {
-        width: 0;
+    width: 0;
-    }
+  }
 
-    100% {
+  100% {
-        width: 85%;
+    width: 85%;
-    }
+  }
 }
 
 .padding-responsive {
-    max-width: 1440px;
+  max-width: 1440px;
-    margin-left: auto;
+  margin-left: auto;
-    margin-right: auto;
+  margin-right: auto;
-    padding-left: 24px;
+  padding-left: 24px;
-    padding-right: 24px;
+  padding-right: 24px;
 }
 
 .hover-rotate-icon:hover svg {
-    transform: rotateY(360deg);
+  transform: rotateY(360deg);
-    transition: 0.5s all;
+  transition: 0.5s all;
 }
 
 .bg-head-menu {
-    background: url(../public/assets/images/bg-head-menu.png);
+  background: url(../public/assets/images/bg-head-menu.png);
 }
 
 .w-full-icon svg {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
 }
 
 @media (max-width: 768px) {
-    .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
+  .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
-        padding-top: 10px;
+    padding-top: 10px;
-        padding-bottom: 10px;
+    padding-bottom: 10px;
-    }
+  }
 }
 
 /* Hidden Scroll */
 
 .MuiPaper-root,
 .MuiTableContainer-root {
-    box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
+  box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
-    border-radius: 4px !important;
+  border-radius: 4px !important;
-    border: 1px solid var(--colors-gray-50, #EFEFEF) !important;
+  border: 1px solid var(--colors-gray-50, #efefef) !important;
-    background: var(--colors-white, #FFF) !important;
+  background: var(--colors-white, #fff) !important;
 }
 
 .hidden-scroll::-webkit-scrollbar-thumb,
 .MuiTabs-scroller::-webkit-scrollbar-thumb,
 .MuiTableContainer-root::-webkit-scrollbar-thumb {
-    background: transparent;
+  background: transparent;
 }
 
 .hidden-scroll::-webkit-scrollbar,
 .MuiTabs-scroller::-webkit-scrollbar,
 .MuiTableContainer-root::-webkit-scrollbar {
-    height: 0;
+  height: 0;
 }
 
 .comment-list::-webkit-scrollbar {
-    height: 10px;
+  height: 10px;
 }
 
 .opacity-page {
-    animation: loadPageOpacity;
+  animation: loadPageOpacity;
-    animation-duration: 1s;
+  animation-duration: 1s;
 }
 
 .retry-icon svg {
-    animation: rotate 1s;
+  animation: rotate 1s;
 }
 
 .table-shadow-none {
-    box-shadow: none !important;
+  box-shadow: none !important;
-    border-radius: 12px !important;
+  border-radius: 12px !important;
 }
 
 .table-rounded-8 .table-shadow-none {
-    border-radius: 8px !important;
+  border-radius: 8px !important;
 }
 
 .w-full-content .content-text-panel {
-    width: 100%;
+  width: 100%;
 }
 
 @keyframes rotate {
-    from {
+  from {
-        rotate: 90;
+    rotate: 90;
-    }
+  }
 
-    to {
+  to {
-        rotate: -360deg;
+    rotate: -360deg;
-    }
+  }
 }
 
 @keyframes loadPageOpacity {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
 
-    100% {
+  100% {
-        opacity: 1;
+    opacity: 1;
-    }
+  }
 }
 
 .padding-responsive {
-    padding-left: 16px;
+  padding-left: 16px;
-    padding-right: 16px;
+  padding-right: 16px;
 }
 
 @media (min-width: 640px) {
-    .padding-responsive {
+  .padding-responsive {
-        padding-left: 52px;
+    padding-left: 52px;
-        padding-right: 52px;
+    padding-right: 52px;
-    }
+  }
 }
 
 @media (min-width: 768px) {
-    .padding-responsive {
+  .padding-responsive {
-        padding-left: 80px;
+    padding-left: 80px;
-        padding-right: 80px;
+    padding-right: 80px;
-    }
+  }
 }
 
 @media (min-width: 1024px) {
-    .padding-responsive {
+  .padding-responsive {
-        padding-left: 108px;
+    padding-left: 108px;
-        padding-right: 108px;
+    padding-right: 108px;
-    }
+  }
 }
 
 /* Date Picker Style */
 
 .panel-elevation {
-    box-shadow: none !important;
+  box-shadow: none !important;
-    border: none;
+  border: none;
-    outline: none;
+  outline: none;
 }
 
 .icon-keyboard_double_arrow_right,
 .icon-keyboard_double_arrow_left {
-    display: none !important;
+  display: none !important;
 }
 
 .icon-chevron-right::before,
 .icon-chevron-left::before {
-    content: "" !important;
+  content: "" !important;
-    background: url(../public/assets/icons/arrow-right.svg);
+  background: url(../public/assets/icons/arrow-right.svg);
-    width: 24px;
+  width: 24px;
-    height: 24px;
+  height: 24px;
 }
 
 .icon-chevron-left::before {
-    rotate: 180deg;
+  rotate: 180deg;
 }
 
 .icon-left-datepicker {
-    rotate: 180deg;
+  rotate: 180deg;
 }
 
 .panel-date-holder-item span {
-    /* font-family: Iran Sans !important; */
+  /* font-family: Iran Sans !important; */
-    font-size: 18px !important;
+  font-size: 18px !important;
-    font-weight: 500 !important;
+  font-weight: 500 !important;
 }
 
 .panel-date-holder-item span:hover {
-    color: #FF8848 !important;
+  color: #ff8848 !important;
 }
 
 .year-item-selected,
 .month-item-selected {
-    background: #FF8848 !important;
+  background: #ff8848 !important;
-    border-radius: 3px !important;
+  border-radius: 3px !important;
 }
 
 .panel-header-rtl {
-    border-bottom: none !important;
+  border-bottom: none !important;
 }
 
 .day-label-bar-inner-rtl div {
-    color: #6C757D !important;
+  color: #6c757d !important;
 }
 
 .panel-jalaali .days-body .not-current {
-    display: none !important;
+  display: none !important;
 }
 
 .panel-jalaali .days-body .day.hovered span {
-    color: #343A40 !important;
+  color: #343a40 !important;
 }
 
 .panel-jalaali .days-body .day.weekend-day span {
-    color: #B71232 !important;
+  color: #b71232 !important;
 }
 
 .panel-jalaali .today,
 .panel-jalaali .highlight {
-    border-radius: 50% !important;
+  border-radius: 50% !important;
 }
 
 .panel-jalaali .today {
-    border: 1px solid #FF8848 !important;
+  border: 1px solid #ff8848 !important;
 }
 
 .panel-jalaali .highlight {
-    background: #ff975d !important;
+  background: #ff975d !important;
 }
 
 .panel-jalaali .panel-footer-wrapper,
 .panel-jalaali .panel-footer-rtl {
-    display: none !important;
+  display: none !important;
 }
 
 .day.hovered.today {
-    border: 1px solid #F79463;
+  border: 1px solid #f79463;
-    border-radius: 50%;
+  border-radius: 50%;
 }
 
 .day-label-bar-inner-rtl {
-    background: #FFF !important;
+  background: #fff !important;
 }
 
 .day-item-outer .day-item-chain .day {
-    border-radius: 50%;
+  border-radius: 50%;
 }
 
 .panel-jalaali .today {
-    border-color: transparent !important;
+  border-color: transparent !important;
 }
 
 @media (max-width: 1024px) {
-
+  .day-label-bar-inner-rtl,
-    .day-label-bar-inner-rtl,
+  .panel-jalaali,
-    .panel-jalaali,
+  .panel-header-rtl,
-    .panel-header-rtl,
+  .days-body {
-    .days-body {
+    background: #fafafa !important;
-        background: #FAFAFA !important;
+  }
-    }
 }
 
 /* End Date Picker Style */

app/layout.js

@@ -1,20 +1,22 @@
 import "./globals.css";
-import ThemeRegistry from './component/ThemeRegistry';
+import ThemeRegistry from "./component/ThemeRegistry";
 import "jalaali-react-date-picker/lib/styles/index.css";
 
 export const metadata = {
   title: "نوبت724",
-  description: "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
+  description:
-  keywords: "نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
+    "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
+  keywords:
+    "نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
   image: "https://www.nobat724.com/assets/images/logo.png",
 };
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="fa" dir='rtl'>
+    <html lang="fa" dir="rtl">
       <ThemeRegistry>
-        <body className='bg-[#FAFAFA]'>{children}</body>
+        <body className="bg-[#FAFAFA]">{children}</body>
       </ThemeRegistry>
     </html>
   );
-};
+}

app/login-verify/page.js

@@ -1,24 +1,25 @@
-'use client';
+"use client";
 
-import RegisterPage from '@/components/register';
+import RegisterPage from "@/components/register";
-import SetCodePage from '@/components/register/SetCodePage';
+import SetCodePage from "@/components/register/SetCodePage";
-import LogInPage from '@/components/register/LogInPage';
+import LogInPage from "@/components/register/LogInPage";
-import { useState } from 'react';
+import { useState } from "react";
 
 function LoginVerify() {
+  const [isSendMsg, setIsSendMsg] = useState(false);
 
-    const [isSendMsg, setIsSendMsg] = useState(false);
+  return (
-
+    <RegisterPage>
-    return (
+      {isSendMsg ? (
-        <RegisterPage>
+        <SetCodePage
-            {isSendMsg ?
+          setIsSendMsg={setIsSendMsg}
-                <SetCodePage
+          link={`/account/${localStorage.getItem("doctor-id")}`}
-                    setIsSendMsg={setIsSendMsg}
+        />
-                    link={`/account/${localStorage.getItem('doctor-id')}`}
+      ) : (
-                /> :
+        <LogInPage setIsSendMsg={setIsSendMsg} />
-                <LogInPage setIsSendMsg={setIsSendMsg} />}
+      )}
-        </RegisterPage>
+    </RegisterPage>
-    )
+  );
 }
 
-export default LoginVerify
+export default LoginVerify;

app/login/page.js

@@ -1,26 +1,23 @@
-'use client';
+"use client";
-import RegisterPage from '@/components/register';
+import RegisterPage from "@/components/register";
-import SetCodePage from '@/components/register/SetCodePage';
+import SetCodePage from "@/components/register/SetCodePage";
-import LogInPage from '@/components/register/LogInPage';
+import LogInPage from "@/components/register/LogInPage";
-import { useState } from 'react';
+import { useState } from "react";
 
 function LogIn() {
+  const [isSendMsg, setIsSendMsg] = useState(false);
 
-    const [isSendMsg, setIsSendMsg] = useState(false);
+  return (
-
+    <div>
-    return (
+      <RegisterPage>
-        <div>
+        {isSendMsg ? (
-            <RegisterPage>
+          <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
-                {isSendMsg ?
+        ) : (
-                    <SetCodePage
+          <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />
-                        setIsSendMsg={setIsSendMsg}
+        )}
-                        setStep={false}
+      </RegisterPage>
-                        link='/'
+    </div>
-                    /> :
+  );
-                    <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />}
-            </RegisterPage>
-        </div>
-    )
 }
 
-export default LogIn
+export default LogIn;

app/not-found.js

@@ -1,12 +1,12 @@
-import Layout from '@/components/layout'
+import Layout from "@/components/layout";
-import NotFoundPage from '@/components/notFound'
+import NotFoundPage from "@/components/notFound";
 
 function NotFound() {
   return (
-    <Layout title='404' disableFooter={true}>
+    <Layout title="404" disableFooter={true}>
       <NotFoundPage />
     </Layout>
-  )
+  );
 }
 
-export default NotFound
+export default NotFound;

app/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout";
 
 export default function Home() {
   return (
-    <Layout title='خانه' name=''>
+    <Layout title="خانه" name="">
       <HomePage />
     </Layout>
   );

app/panel/(layout)/add-doctor/page.js

@@ -1,10 +1,8 @@
 import AddDoctorPage from "@/components/panel/addDoctor";
-import Information from '@/data/information.json';
+import Information from "@/data/information.json";
 
 function AddDoctor() {
-    return (
+  return <AddDoctorPage data={Information} />;
-        <AddDoctorPage data={Information} />
-    )
 }
 
-export default AddDoctor
+export default AddDoctor;

app/panel/(layout)/dashboard/page.js

@@ -1,12 +1,10 @@
-'use client';
+"use client";
 
 import DashboardPage from "@/components/panel/dashboard";
-import Information from '@/data/information.json';
+import Information from "@/data/information.json";
 
 function Dashboard() {
-    return (
+  return <DashboardPage data={Information} />;
-        <DashboardPage data={Information} />
-    )
 }
 
-export default Dashboard
+export default Dashboard;

app/panel/(layout)/layout.js

@@ -1,60 +1,62 @@
-'use client';
+"use client";
 
 import { useEffect, useState } from "react";
 import Header from "@/components/layoutPanel/header";
 import Sidebar from "@/components/layoutPanel/sidebar";
-import Information from '@/data/information.json';
+import Information from "@/data/information.json";
 import UserDetail from "@/components/layoutPanel/userDetail";
 import { usePathname } from "next/navigation";
 import BgGray from "@/components/layoutPanel/sidebar/BgGray";
 
 function LayoutPanel({ children }) {
+  const pathname = usePathname();
+  const [active, setActive] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
 
-    const pathname = usePathname();
+  useEffect(() => {
-    const [active, setActive] = useState(false);
+    setTimeout(() => {
-    const [open, setOpen] = useState(false);
+      setLoading(false);
-    const [loading, setLoading] = useState(true);
+    }, 2000);
+  }, []);
 
-    useEffect(() => {
+  return (
-        setTimeout(() => {
+    <div className="flex min-h-screen">
-            setLoading(false);
+      <Sidebar
-        }, 2000);
+        open={open}
-    }, []);
+        active={active}
-
+        setOpen={setOpen}
-
+        setActive={setActive}
-    return (
+      />
-        <div className="flex min-h-screen">
+      <BgGray isActive={active} setIsActive={setActive} />
-            <Sidebar
+      <main
-                open={open}
+        className={`
-                active={active}
-                setOpen={setOpen}
-                setActive={setActive}
-            />
-            <BgGray isActive={active} setIsActive={setActive} />
-            <main className={`
                 w-full transition-all duration-500
-                ${pathname.includes('dashboard') ?
+                ${
-                    (open ?
+                  pathname.includes("dashboard")
-                        'md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]' :
+                    ? open
-                        'md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]'
+                      ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
-                    ) : (open ?
+                      : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
-                        'md:w-[calc(100%-243px)]' :
+                    : open
-                        'md:w-[calc(100%-96px)]')}
+                    ? "md:w-[calc(100%-243px)]"
-            `}>
+                    : "md:w-[calc(100%-96px)]"
-                <Header
+                }
-                    data={Information}
+            `}
-                    setActive={setActive}
+      >
-                    disableProfile={pathname.includes('dashboard')}
+        <Header
-                />
+          data={Information}
-                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
+          setActive={setActive}
-                    {children}
+          disableProfile={pathname.includes("dashboard")}
-                </section>
+        />
-            </main>
+        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
-            {pathname.includes('dashboard') && (
+          {children}
-                <UserDetail data={Information} loading={loading} />
+        </section>
-            )}
+      </main>
-        </div>
+      {pathname.includes("dashboard") && (
-    )
+        <UserDetail data={Information} loading={loading} />
+      )}
+    </div>
+  );
 }
 
-export default LayoutPanel
+export default LayoutPanel;

app/panel/(layout)/turns/page.js

@@ -1,10 +1,8 @@
-import TurnsPage from '@/components/panel/turns'
+import TurnsPage from "@/components/panel/turns";
-import Information from '@/data/information.json';
+import Information from "@/data/information.json";
 
 function page() {
-    return (
+  return <TurnsPage data={Information} />;
-        <TurnsPage data={Information} />
-    )
 }
 
-export default page
+export default page;

app/panel/(layout)/user-account/page.js

@@ -1,10 +1,8 @@
-import UserAccountPage from "@/components/panel/userAccount"
+import UserAccountPage from "@/components/panel/userAccount";
-import Information from '@/data/information.json';
+import Information from "@/data/information.json";
 
 function UserAccount() {
-    return (
+  return <UserAccountPage data={Information} />;
-        <UserAccountPage data={Information} />
-    )
 }
 
-export default UserAccount
+export default UserAccount;

app/specialties/page.js

@@ -1,12 +1,12 @@
-import Layout from '@/components/layout';
+import Layout from "@/components/layout";
-import SpecialtiesPage from '@/components/specialties';
+import SpecialtiesPage from "@/components/specialties";
 
 function Specialties() {
-    return (
+  return (
-        <Layout title='تخصص ها' name='specialties'>
+    <Layout title="تخصص ها" name="specialties">
-            <SpecialtiesPage />
+      <SpecialtiesPage />
-        </Layout>
+    </Layout>
-    )
+  );
 }
 
-export default Specialties
+export default Specialties;

app/theme/theme.js

@@ -1,39 +1,39 @@
-'use client';
+"use client";
-import { createTheme } from '@mui/material/styles';
+import { createTheme } from "@mui/material/styles";
 
 const theme = createTheme({
-    direction: 'rtl',
+  direction: "rtl",
-    typography: {
+  typography: {
-        fontFamily: 'iran-sans',
+    fontFamily: "iran-sans",
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          whiteSpace: "nowrap",
+          minWidth: "0",
+          padding: "9px 18px",
+          fontSize: "16px",
+          fontStyle: "normal",
+          fontWeight: "500",
+        },
+      },
     },
-    components: {
+  },
-        MuiButton: {
+  palette: {
-            styleOverrides: {
+    primary: {
-                root: {
+      main: "#5559CE",
-                    whiteSpace: 'nowrap',
+      contrastText: "#EFEFEF",
-                    minWidth: '0',
-                    padding: '9px 18px',
-                    fontSize: '16px',
-                    fontStyle: 'normal',
-                    fontWeight: '500',
-                },
-            },
-        },
     },
-    palette: {
+    secondary: {
-        primary: {
+      main: "#FAFAFA",
-            main: "#5559CE",
+      contrastText: "#616161",
-            contrastText: "#EFEFEF",
+    },
-        },
+    success: {
-        secondary: {
+      main: "#FFB800",
-            main: "#FAFAFA",
+      contrastText: "#FFF",
-            contrastText: "#616161",
+    },
-        },
+  },
-        success: {
-            main: "#FFB800",
-            contrastText: "#FFF",
-        }
-    }
 });
 
 export default theme;

components/aboutUs/Head.js

@@ -1,18 +1,20 @@
-import Image from 'next/image'
+import Image from "next/image";
-import React from 'react'
+import React from "react";
 
 function Head() {
-    return (
+  return (
-        <div className='bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]'>
+    <div className="bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]">
-            <Image
+      <Image
-                src='/assets/images/logo-2.png'
+        src="/assets/images/logo-2.png"
-                height={46}
+        height={46}
-                width={46}
+        width={46}
-                alt='logo'
+        alt="logo"
-            />
+      />
-            <p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">درباره نوبت ۷۲۴</p>
+      <p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">
-        </div>
+        درباره نوبت ۷۲۴
-    )
+      </p>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/aboutUs/Services.js

@@ -1,40 +1,37 @@
-import AnimationTextHead from '@/app/component/AnimationTextHead';
+import AnimationTextHead from "@/app/component/AnimationTextHead";
-import UnderlineLG from '../icons/UnderlineLG';
+import UnderlineLG from "../icons/UnderlineLG";
-import TickOrangeA from '../icons/TickOrangeA';
+import TickOrangeA from "../icons/TickOrangeA";
 
 const ourServices = [
-    'جستجوی سریع پزشک ',
+  "جستجوی سریع پزشک ",
-    'جستجوی کلینیک و مراکز درمانی',
+  "جستجوی کلینیک و مراکز درمانی",
-    'نوبت گیری راحت و آسان',
+  "نوبت گیری راحت و آسان",
-    'دشبورد تخصصی بیمار',
+  "دشبورد تخصصی بیمار",
-    'دشبورد تخصصی پزشک',
+  "دشبورد تخصصی پزشک",
-    'نوبت گیری راحت و آسان'
+  "نوبت گیری راحت و آسان",
-]
+];
 
 function Services() {
-    return (
+  return (
-        <div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]'>
+    <div className="mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]">
-            <div className='flex justify-center'>
+      <div className="flex justify-center">
-                <AnimationTextHead name='zoom-in-up' text='خدمات ما'>
+        <AnimationTextHead name="zoom-in-up" text="خدمات ما">
-                    <UnderlineLG />
+          <UnderlineLG />
-                </AnimationTextHead>
+        </AnimationTextHead>
-            </div>
+      </div>
-            <ul
+      <ul
-                className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] 
+        className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] 
-                gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3'
+                gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
-            >
+      >
-                {ourServices.map((item, idx) => (
+        {ourServices.map((item, idx) => (
-                    <li
+          <li key={idx} className="flex items-start justify-start gap-[8px]">
-                        key={idx}
+            <TickOrangeA />
-                        className='flex items-start justify-start gap-[8px]'
+            <p className="text-[#525252] text-[16px] font-medium">{item}</p>
-                    >
+          </li>
-                        <TickOrangeA />
+        ))}
-                        <p className='text-[#525252] text-[16px] font-medium'>{item}</p>
+      </ul>
-                    </li>
+    </div>
-                ))}
+  );
-            </ul>
-        </div>
-    )
 }
 
-export default Services
+export default Services;

components/aboutUs/index.js

@@ -2,23 +2,34 @@ import Head from "./Head";
 import Services from "./Services";
 
 function AboutUsPage() {
-    return (
+  return (
-        <div
+    <div
-            className="
+      className="
                 pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px]
                 px-0 md:px-[80px] lg:px-[108px]
             "
-        >
+    >
-            <Head />
+      <Head />
-            <p
+      <p
-                className="
+        className="
                     text-[#525252] text-[16px] font-normal mt-[32px] leading-[24px] md:leading-[32px] lg:leading-[40px]
                     px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center
                 "
-            >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
+      >
-            <Services />
+        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        </div>
+        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-    )
+        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
+        متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
+        درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با
+        نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان
+        خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید
+        داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان
+        رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
+        پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+      </p>
+      <Services />
+    </div>
+  );
 }
 
 export default AboutUsPage;

components/blog/detail/Caption.js

@@ -1,47 +1,47 @@
-import CustomLoading from '@/app/component/loading/Custom'
+import CustomLoading from "@/app/component/loading/Custom";
-import MultilineLoading from '@/app/component/loading/Multiline'
+import MultilineLoading from "@/app/component/loading/Multiline";
-import Image from 'next/image'
+import Image from "next/image";
-import React from 'react'
+import React from "react";
 
 function Caption({ data, loading }) {
-    return (
+  return (
-        <>
+    <>
-            <CustomLoading loading={loading} width='full' height={500}>
+      <CustomLoading loading={loading} width="full" height={500}>
-                <Image
+        <Image
-                    className="rounded-[8px] overflow-hidden w-full"
+          className="rounded-[8px] overflow-hidden w-full"
-                    src={data.cover_first}
+          src={data.cover_first}
-                    alt="cover-blog"
+          alt="cover-blog"
-                    height={570}
+          height={570}
-                    width={808}
+          width={808}
-                />
+        />
-            </CustomLoading>
+      </CustomLoading>
-            <div className={loading ? 'my-4' : ''}>
+      <div className={loading ? "my-4" : ""}>
-                <MultilineLoading loading={loading} width='full' height={18} line={20}>
+        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-                    <div
+          <div
-                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                        dangerouslySetInnerHTML={{ __html: data.caption }}
+            dangerouslySetInnerHTML={{ __html: data.caption }}
-                    />
+          />
-                </MultilineLoading>
+        </MultilineLoading>
-            </div>
+      </div>
-            <CustomLoading loading={loading} width='full' height={500}>
+      <CustomLoading loading={loading} width="full" height={500}>
-                <Image
+        <Image
-                    className="rounded-[8px] overflow-hidden w-full"
+          className="rounded-[8px] overflow-hidden w-full"
-                    src={data.cover_second}
+          src={data.cover_second}
-                    alt="cover-blog"
+          alt="cover-blog"
-                    height={570}
+          height={570}
-                    width={808}
+          width={808}
-                />
+        />
-            </CustomLoading>
+      </CustomLoading>
-            <div className={loading ? 'my-4' : ''}>
+      <div className={loading ? "my-4" : ""}>
-                <MultilineLoading loading={loading} width='full' height={18} line={20}>
+        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-                    <div
+          <div
-                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                        dangerouslySetInnerHTML={{ __html: data.caption }}
+            dangerouslySetInnerHTML={{ __html: data.caption }}
-                    />
+          />
-                </MultilineLoading>
+        </MultilineLoading>
-            </div>
+      </div>
-        </>
+    </>
-    )
+  );
 }
 
-export default Caption
+export default Caption;

components/blog/detail/SocialMedia.js

@@ -1,30 +1,26 @@
-import CircularLoading from "@/app/component/loading/Circular"
+import CircularLoading from "@/app/component/loading/Circular";
-import LinkedinB from "@/components/icons/LinkedinB"
+import LinkedinB from "@/components/icons/LinkedinB";
-import TelegramB from "@/components/icons/TelegramB"
+import TelegramB from "@/components/icons/TelegramB";
-import WhatsappB from "@/components/icons/WhatsappB"
+import WhatsappB from "@/components/icons/WhatsappB";
 
-const socials = [
+const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
-    <WhatsappB />,
-    <TelegramB />,
-    <LinkedinB />
-]
 
 function SocialMedia({ loading }) {
-    return (
+  return (
-        <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
+    <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
-            {socials.map((item, idx) => (
+      {socials.map((item, idx) => (
-                <CircularLoading width={36} height={36} loading={loading}>
+        <CircularLoading width={36} height={36} loading={loading}>
-                    <li
+          <li
-                        key={idx}
+            key={idx}
-                        className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+            className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
-                    >
+          >
-                        {item}
+            {item}
-                    </li>
+          </li>
-                </CircularLoading>
+        </CircularLoading>
-            ))}
+      ))}
-            <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
+      <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
-        </ul>
+    </ul>
-    )
+  );
 }
 
-export default SocialMedia
+export default SocialMedia;

components/blog/detail/commentUser/AddComment.js

@@ -1,19 +1,21 @@
-import { Button } from '@mui/material'
+import { Button } from "@mui/material";
-import React from 'react'
+import React from "react";
 
 function AddComment() {
-    return (
+  return (
-        <div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
+    <div className="flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]">
-            <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
+      <p className="text-[#616161] text-[16px] font-normal">
-            <Button
+        شما هم نظر خود را به اشتراک بگذارید:
-                variant='outlined'
+      </p>
-                className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
+      <Button
-                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
+        variant="outlined"
-            >
+        className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
-                ثبت نظر
+                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
-            </Button>
+      >
-        </div>
+        ثبت نظر
-    )
+      </Button>
+    </div>
+  );
 }
 
-export default AddComment
+export default AddComment;

components/blog/detail/commentUser/index.js

@@ -1,19 +1,19 @@
-import AnimationTextHead from '@/app/component/AnimationTextHead'
+import AnimationTextHead from "@/app/component/AnimationTextHead";
-import Comment from '@/app/component/comment'
+import Comment from "@/app/component/comment";
-import Underline from '@/components/icons/Underline'
+import Underline from "@/components/icons/Underline";
-import React from 'react'
+import React from "react";
-import AddComment from './AddComment'
+import AddComment from "./AddComment";
 
 function CommentUser({ data, loading }) {
-    return (
+  return (
-        <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
+    <div className="mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
-            <AnimationTextHead name='zoom-in-up' text='نظرات'>
+      <AnimationTextHead name="zoom-in-up" text="نظرات">
-                <Underline />
+        <Underline />
-            </AnimationTextHead>
+      </AnimationTextHead>
-            <AddComment />
+      <AddComment />
-            <Comment data={data} loading={loading} />
+      <Comment data={data} loading={loading} />
-        </div>
+    </div>
-    )
+  );
 }
 
-export default CommentUser
+export default CommentUser;

components/blog/detail/index.js

@@ -3,13 +3,13 @@ import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";
 
 function Detail({ data, loading }) {
-    return (
+  return (
-        <div className="w-full lg:w-[68%]">
+    <div className="w-full lg:w-[68%]">
-            <Caption data={data} loading={loading} />
+      <Caption data={data} loading={loading} />
-            <SocialMedia loading={loading} />
+      <SocialMedia loading={loading} />
-            <CommentUser data={data} loading={loading} />
+      <CommentUser data={data} loading={loading} />
-        </div>
+    </div>
-    )
+  );
 }
 
-export default Detail
+export default Detail;

components/blog/head/index.js

@@ -1,36 +1,56 @@
-import TextLoading from "@/app/component/loading/Text"
+import TextLoading from "@/app/component/loading/Text";
 
 function Head({ data, loading }) {
-    return (
+  return (
-        <div>
+    <div>
-            <TextLoading width={200} height={18} loading={loading}>
+      <TextLoading width={200} height={18} loading={loading}>
-                <div className="flex items-center justify-start gap-1">
+        <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
+          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
+            بلاگ {">"}
-                    <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
+          </p>
-                </div>
+          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-            </TextLoading>
+            پوست و مو {">"}
-            <div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
+          </p>
-                <TextLoading width={250} height={22} loading={loading}>
+          <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-                    <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
+            روش های خانگی محافظت از پوست در تابستان
-                </TextLoading>
+          </p>
-            </div>
-            <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
-                <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
-                    <TextLoading width={55} height={22} loading={loading}>
-                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
-                    </TextLoading>
-                </div>
-                <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
-                    <TextLoading width={55} height={22} loading={loading}>
-                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
-                    </TextLoading>
-                </div>
-            </div>
         </div>
-    )
+      </TextLoading>
+      <div
+        className={
+          loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
+        }
+      >
+        <TextLoading width={250} height={22} loading={loading}>
+          <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
+            روش های خانگی محافظت از پوست در تابستان
+          </p>
+        </TextLoading>
+      </div>
+      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
+        <div className="flex items-center justify-start gap-1">
+          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+            تاریخ انتشار:
+          </p>
+          <TextLoading width={55} height={22} loading={loading}>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {data.date_of_release}
+            </p>
+          </TextLoading>
+        </div>
+        <div className="flex items-center justify-start gap-1">
+          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+            زمان مطالعه:
+          </p>
+          <TextLoading width={55} height={22} loading={loading}>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {data.time}
+            </p>
+          </TextLoading>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/blog/index.js

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import { useEffect, useState } from "react";
 import Detail from "./detail";
@@ -6,24 +6,23 @@ import Head from "./head";
 import RelatedContent from "./relatedContent";
 
 function BlogPage({ article, articles }) {
+  const [loading, setLoading] = useState(true);
 
-    const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
 
-    useEffect(() => {
+  return (
-        setTimeout(() => {
+    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-            setLoading(false);
+      <Head data={article} loading={loading} />
-        }, 2000);
+      <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-    }, []);
+        <Detail data={article} loading={loading} />
-
+        <RelatedContent data={articles} loading={loading} />
-    return (
+      </div>
-        <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
+    </div>
-            <Head data={article} loading={loading} />
+  );
-            <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-                <Detail data={article} loading={loading} />
-                <RelatedContent data={articles} loading={loading} />
-            </div>
-        </div>
-    )
 }
 
-export default BlogPage
+export default BlogPage;

components/blog/relatedContent/Item.js

@@ -5,42 +5,42 @@ import Image from "next/image";
 import Link from "next/link";
 
 function Item({ data, idx, loading }) {
-    return (
+  return (
-        <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
+    <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
-            <CustomLoading width={80} height={72} loading={loading}>
+      <CustomLoading width={80} height={72} loading={loading}>
-                <Link href={`/blog/${data.id}`}>
+        <Link href={`/blog/${data.id}`}>
-                    <Image
+          <Image
-                        className="
+            className="
                         min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
                         min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
                         rounded-[8px] overflow-hidden object-cover
                     "
-                        src={data.src}
+            src={data.src}
-                        alt="article"
+            alt="article"
-                        height={88}
+            height={88}
-                        width={97}
+            width={97}
-                    />
+          />
-                </Link>
+        </Link>
-            </CustomLoading>
+      </CustomLoading>
-            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
+      <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
-                <TextLoading width={150} height={18} loading={loading}>
+        <TextLoading width={150} height={18} loading={loading}>
-                    <Link href={`/blog/${data.id}`}>
+          <Link href={`/blog/${data.id}`}>
-                        <p
+            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
-                            className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
+              {data.title}
-                        >{data.title}</p>
+            </p>
-                    </Link>
+          </Link>
-                </TextLoading>
+        </TextLoading>
-                <TextLoading width={110} height={18} loading={loading}>
+        <TextLoading width={110} height={18} loading={loading}>
-                    <p
+          <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
-                        className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+            تاریخ انتشار: {data.date_of_release}
-                    >تاریخ انتشار: {data.date_of_release}</p>
+          </p>
-                </TextLoading>
+        </TextLoading>
-            </div>
+      </div>
-            {data.id > idx + 1 && (
+      {data.id > idx + 1 && (
-                <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+        <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
-            )}
+      )}
-        </li>
+    </li>
-    )
+  );
 }
 
-export default Item
+export default Item;

components/blog/relatedContent/index.js

@@ -1,26 +1,21 @@
-import AnimationTextHead from '@/app/component/AnimationTextHead'
+import AnimationTextHead from "@/app/component/AnimationTextHead";
-import UnderlineLG from '@/components/icons/UnderlineLG'
+import UnderlineLG from "@/components/icons/UnderlineLG";
-import React from 'react'
+import React from "react";
-import Item from './Item'
+import Item from "./Item";
 
 function RelatedContent({ data, loading }) {
   return (
-    <div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+    <div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
-      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+      <AnimationTextHead name="fade-up" text="مطالب مرتبط">
         <UnderlineLG />
       </AnimationTextHead>
-      <ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
+      <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
         {data.map((item, idx) => (
-          <Item
+          <Item idx={idx} data={item} key={item.id} loading={loading} />
-            idx={idx}
-            data={item}
-            key={item.id}
-            loading={loading}
-          />
         ))}
       </ul>
     </div>
-  )
+  );
 }
 
-export default RelatedContent
+export default RelatedContent;

components/blogs/Head.js

@@ -1,77 +1,109 @@
-import CustomLoading from '@/app/component/loading/Custom'
+import CustomLoading from "@/app/component/loading/Custom";
-import TextLoading from '@/app/component/loading/Text'
+import TextLoading from "@/app/component/loading/Text";
-import Image from 'next/image'
+import Image from "next/image";
-import Link from 'next/link'
+import Link from "next/link";
 
 function Head({ loading }) {
-    return (
+  return (
-        <div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+    <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-            <Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
+      <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
-                <CustomLoading loading={loading} width='full' height={400}>
+        <CustomLoading loading={loading} width="full" height={400}>
-                    <Image
+          <Image
-                        src='/assets/images/head-blogs-1.png'
+            src="/assets/images/head-blogs-1.png"
-                        width={600}
+            width={600}
-                        height={424}
+            height={424}
-                        alt='head blog'
+            alt="head blog"
-                    />
+          />
-                </CustomLoading>
+        </CustomLoading>
-                <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+        <div
-                    <TextLoading width={150} height={20} loading={loading}>
+          className={
-                        <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
+            loading
-                    </TextLoading>
+              ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
-                </div>
+              : ""
-            </Link>
+          }
-            <div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+        >
-                <div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+          <TextLoading width={150} height={20} loading={loading}>
-                    <Link href='#' className='w-full cover-head-blogs'>
+            <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-                        <CustomLoading loading={loading} width='full' height={180}>
+              روش های خانگی محافظت از پوست در تابستان
-                            <Image
+            </p>
-                                src='/assets/images/head-blogs-2.png'
+          </TextLoading>
-                                width={600}
-                                height={424}
-                                alt='head blog'
-                            />
-                        </CustomLoading>
-                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
-                            <TextLoading width={150} height={20} loading={loading}>
-                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
-                            </TextLoading>
-                        </div>
-                    </Link>
-                    <Link href='#' className='w-full cover-head-blogs'>
-                        <CustomLoading loading={loading} width='full' height={180}>
-                            <Image
-                                src='/assets/images/head-blogs-3.png'
-                                width={600}
-                                height={424}
-                                alt='head blog'
-                            />
-                        </CustomLoading>
-                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
-                            <TextLoading width={150} height={20} loading={loading}>
-                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
-                            </TextLoading>
-                        </div>
-                    </Link>
-                </div>
-                <Link href='#' className='w-full cover-head-blogs'>
-                    <CustomLoading loading={loading} width='full' height={180}>
-                        <Image
-                            src='/assets/images/head-blogs-4.png'
-                            width={600}
-                            height={424}
-                            alt='head blog'
-                        />
-                    </CustomLoading>
-                    <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
-                        <TextLoading width={150} height={20} loading={loading}>
-                            <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
-                        </TextLoading>
-                    </div>
-                </Link>
-            </div>
         </div>
-    )
+      </Link>
+      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+          <Link href="#" className="w-full cover-head-blogs">
+            <CustomLoading loading={loading} width="full" height={180}>
+              <Image
+                src="/assets/images/head-blogs-2.png"
+                width={600}
+                height={424}
+                alt="head blog"
+              />
+            </CustomLoading>
+            <div
+              className={
+                loading
+                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
+                  : ""
+              }
+            >
+              <TextLoading width={150} height={20} loading={loading}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  فواید نوشیدن آب برای سلامتی
+                </p>
+              </TextLoading>
+            </div>
+          </Link>
+          <Link href="#" className="w-full cover-head-blogs">
+            <CustomLoading loading={loading} width="full" height={180}>
+              <Image
+                src="/assets/images/head-blogs-3.png"
+                width={600}
+                height={424}
+                alt="head blog"
+              />
+            </CustomLoading>
+            <div
+              className={
+                loading
+                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
+                  : ""
+              }
+            >
+              <TextLoading width={150} height={20} loading={loading}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  راهکارهای ساده برای درمان سر درد
+                </p>
+              </TextLoading>
+            </div>
+          </Link>
+        </div>
+        <Link href="#" className="w-full cover-head-blogs">
+          <CustomLoading loading={loading} width="full" height={180}>
+            <Image
+              src="/assets/images/head-blogs-4.png"
+              width={600}
+              height={424}
+              alt="head blog"
+            />
+          </CustomLoading>
+          <div
+            className={
+              loading
+                ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
+                : ""
+            }
+          >
+            <TextLoading width={150} height={20} loading={loading}>
+              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
+                تغذیه مناسب برای کاهش فشار خون
+              </p>
+            </TextLoading>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/blogs/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useEffect, useState } from "react";
 
@@ -7,22 +7,21 @@ import Title from "./title";
 import LatestArticles from "./latestArticles";
 
 function BlogsPage() {
+  const [loading, setLoading] = useState(true);
 
-    const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
 
-    useEffect(() => {
+  return (
-        setTimeout(() => {
+    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-            setLoading(false);
+      <Title />
-        }, 2000);
+      <Head loading={loading} />
-    }, []);
+      <LatestArticles loading={loading} />
-
+    </div>
-    return (
+  );
-        <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-            <Title />
-            <Head loading={loading} />
-            <LatestArticles loading={loading} />
-        </div>
-    )
 }
 
-export default BlogsPage
+export default BlogsPage;

components/blogs/latestArticles/Article.js

@@ -1,41 +1,47 @@
-import CustomLoading from '@/app/component/loading/Custom';
+import CustomLoading from "@/app/component/loading/Custom";
-import TextLoading from '@/app/component/loading/Text';
+import TextLoading from "@/app/component/loading/Text";
-import Image from 'next/image'
+import Image from "next/image";
-import Link from 'next/link';
+import Link from "next/link";
 
 function Article({ data, loading }) {
-    return (
+  return (
-        <li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
+    <li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
-            <CustomLoading width='full' height={200} loading={loading}>
+      <CustomLoading width="full" height={200} loading={loading}>
-                <Link href={`/blog/${data.id}`}>
+        <Link href={`/blog/${data.id}`}>
-                    <Image
+          <Image
-                        className='w-full'
+            className="w-full"
-                        alt="article-img"
+            alt="article-img"
-                        src={data.src}
+            src={data.src}
-                        height={217}
+            height={217}
-                        width={392}
+            width={392}
-                    />
+          />
-                </Link>
+        </Link>
-            </CustomLoading>
+      </CustomLoading>
-            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
+      <div className="p-[12px] md:p-[14px] lg:p-[16px]">
-                <div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
+        <div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
-                    <TextLoading width={150} height={18} loading={loading}>
+          <TextLoading width={150} height={18} loading={loading}>
-                        <Link href={`/blog/${data.id}`}>
+            <Link href={`/blog/${data.id}`}>
-                            <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
+              <p className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
-                        </Link>
+                {data.title}
-                    </TextLoading>
+              </p>
-                </div>
+            </Link>
-                <div className='flex items-center justify-start gap-[35px]'>
+          </TextLoading>
-                    <TextLoading width={100} height={18} loading={loading}>
+        </div>
-                        <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
+        <div className="flex items-center justify-start gap-[35px]">
-                    </TextLoading>
+          <TextLoading width={100} height={18} loading={loading}>
-                    <TextLoading width={110} height={18} loading={loading}>
+            <p className="text-[#9B9B9B] text-[14px] font-medium">
-                        <p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
+              تاریخ انتشار: {data.date_of_release}
-                    </TextLoading>
+            </p>
-                </div>
+          </TextLoading>
-            </div>
+          <TextLoading width={110} height={18} loading={loading}>
-        </li>
+            <p className="text-[#9B9B9B] text-[14px] font-medium">
-    )
+              زمان مطالعه: {data.time}
+            </p>
+          </TextLoading>
+        </div>
+      </div>
+    </li>
+  );
 }
 
 export default Article;

components/blogs/latestArticles/index.js

@@ -1,25 +1,23 @@
-import articles from '@/data/articles.json';
+import articles from "@/data/articles.json";
 import Article from "./Article";
-import Pagination from '@/app/component/Pagination';
+import Pagination from "@/app/component/Pagination";
 
 function LatestArticles({ loading }) {
-    return (
+  return (
-        <div>
+    <div>
-            <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
+      <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
+        جدیدترین مقاله ها
-                {articles.map(item => (
+      </p>
-                    <Article
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
-                        data={item}
+        {articles.map((item) => (
-                        key={item.id}
+          <Article data={item} key={item.id} loading={loading} />
-                        loading={loading}
+        ))}
-                    />
+      </ul>
-                ))}
+      <div className="mt-[56px] flex justify-center">
-            </ul>
+        <Pagination />
-            <div className='mt-[56px] flex justify-center'>
+      </div>
-                <Pagination />
+    </div>
-            </div>
+  );
-        </div>
-    )
 }
 
-export default LatestArticles
+export default LatestArticles;

components/blogs/title/ItemTitle.js

@@ -1,22 +1,25 @@
-import { Button } from "@mui/material"
+import { Button } from "@mui/material";
 
 function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
-
+  return (
-    return (
+    <li>
-        <li>
+      <Button
-            <Button
+        className={`
-                className={`
                 !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
-                ${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
+                ${
+                  activeBtn === idx
+                    ? "!bg-[#F17732] !text-[#FAFAFA]"
+                    : "!bg-[#F5F5F5] !text-[#3B3B3B]"
+                }
             `}
-                onClick={() => setActiveBtn(idx)}
+        onClick={() => setActiveBtn(idx)}
-                variant="contained"
+        variant="contained"
-                color="secondary"
+        color="secondary"
-            >
+      >
-                {name}
+        {name}
-            </Button>
+      </Button>
-        </li>
+    </li>
-    )
+  );
 }
 
-export default ItemTitle
+export default ItemTitle;

components/blogs/title/index.js

@@ -1,26 +1,25 @@
-'use client';
+"use client";
 import { useState } from "react";
 import ItemTitle from "./ItemTitle";
 
-const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
+const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
 
 function Title() {
+  const [activeBtn, setActiveBtn] = useState(0);
 
-    const [activeBtn, setActiveBtn] = useState(0);
+  return (
-
+    <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
-    return (
+      {listTitle.map((name, idx) => (
-        <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
+        <ItemTitle
-            {listTitle.map((name, idx) => (
+          setActiveBtn={setActiveBtn}
-                <ItemTitle
+          activeBtn={activeBtn}
-                    setActiveBtn={setActiveBtn}
+          name={name}
-                    activeBtn={activeBtn}
+          idx={idx}
-                    name={name}
+          key={idx}
-                    idx={idx}
+        />
-                    key={idx}
+      ))}
-                />
+    </ul>
-            ))}
+  );
-        </ul>
-    )
 }
 
-export default Title
+export default Title;

components/booking/date/PlaceVisit.js

@@ -1,28 +1,29 @@
-'use client';
+"use client";
 
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 
 function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
+  const clinics = [
+    { label: "درمانگاه رازی", id: 10 },
+    { label: "درمانگاه ابوعلی", id: 20 },
+    { label: "درمانگاه مرکزی", id: 30 },
+  ];
 
-    const clinics = [
+  const updateData = (event) => setLocateVisit(event.target.innerText);
-        { label: 'درمانگاه رازی', id: 10 },
-        { label: 'درمانگاه ابوعلی', id: 20 },
-        { label: 'درمانگاه مرکزی', id: 30 }
-    ];
 
-    const updateData = event => setLocateVisit(event.target.innerText);
+  return (
-
+    <div className="flex flex-col items-start gap-[19px] justify-start">
-    return (
+      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-        <div className="flex flex-col items-start gap-[19px] justify-start">
+        1. انتخاب محل ویزیت
-            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
+      </p>
-            <AutoCompleteSelect
+      <AutoCompleteSelect
-                isError={isError && !locateVisit}
+        isError={isError && !locateVisit}
-                updateData={updateData}
+        updateData={updateData}
-                label='درمانگاه'
+        label="درمانگاه"
-                list={clinics}
+        list={clinics}
-            />
+      />
-        </div>
+    </div>
-    )
+  );
 }
 
-export default PlaceVisit
+export default PlaceVisit;

components/booking/date/Time/SelectDatePicker.js

@@ -1,9 +1,7 @@
-import DatePicker from "@/app/component/date/datePicker"
+import DatePicker from "@/app/component/date/datePicker";
 
 function SelectDatePicker() {
-    return (
+  return <DatePicker />;
-        <DatePicker />
-    )
 }
 
-export default SelectDatePicker
+export default SelectDatePicker;

components/booking/date/Time/index.js

@@ -1,15 +1,17 @@
-import SelectDatePicker from "./SelectDatePicker"
+import SelectDatePicker from "./SelectDatePicker";
 
 function Time({ isStep }) {
-    return (
+  return (
-        <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
+    <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
-            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
+      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-            <SelectDatePicker />
+        2. انتخاب روز
-            {!isStep && (
+      </p>
-                <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+      <SelectDatePicker />
-            )}
+      {!isStep && (
-        </div>
+        <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
-    )
+      )}
+    </div>
+  );
 }
 
-export default Time
+export default Time;

components/booking/date/hour/index.js

@@ -1,20 +1,22 @@
-import DateTime from "@/app/component/date/dateTime"
+import DateTime from "@/app/component/date/dateTime";
 
 function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
-    return (
+  return (
-        <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
+    <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
-            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
+      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-            <DateTime
+        3. انتخاب ساعت
-                doctor={doctor}
+      </p>
-                setStep={setStep}
+      <DateTime
-                setIsError={setIsError}
+        doctor={doctor}
-                locateVisit={locateVisit}
+        setStep={setStep}
-            />
+        setIsError={setIsError}
-            {!isStep && (
+        locateVisit={locateVisit}
-                <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+      />
-            )}
+      {!isStep && (
-        </div>
+        <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
-    )
+      )}
+    </div>
+  );
 }
 
-export default Hour
+export default Hour;

components/booking/date/index.js

@@ -4,34 +4,35 @@ import Time from "./Time";
 import PlaceVisit from "./PlaceVisit";
 
 function Date({ doctor, setStep }) {
+  const [locateVisit, setLocateVisit] = useState();
+  const [isError, setIsError] = useState(false);
 
-    const [locateVisit, setLocateVisit] = useState();
+  return (
-    const [isError, setIsError] = useState(false);
+    <div className="w-full lg:w-[61%]">
-
+      <div
-    return (
+        className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
-        <div className="w-full lg:w-[61%]">
+            bg-transparent lg:bg-[#FFF]"
-            <div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
+      >
-            bg-transparent lg:bg-[#FFF]">
+        <PlaceVisit
-                <PlaceVisit
+          setLocateVisit={setLocateVisit}
-                    setLocateVisit={setLocateVisit}
+          locateVisit={locateVisit}
-                    locateVisit={locateVisit}
+          isError={isError}
-                    isError={isError}
+        />
-                />
+        <Time
-                <Time
+          isStep={doctor.multiwork ? locateVisit : true}
-                    isStep={doctor.multiwork ? locateVisit : true}
+          locateVisit={locateVisit}
-                    locateVisit={locateVisit}
+        />
-                />
+        <Hour
-                <Hour
+          isStep={doctor.multiwork ? locateVisit : true}
-                    isStep={doctor.multiwork ? locateVisit : true}
+          setLocateVisit={setLocateVisit}
-                    setLocateVisit={setLocateVisit}
+          locateVisit={locateVisit}
-                    locateVisit={locateVisit}
+          setIsError={setIsError}
-                    setIsError={setIsError}
+          setStep={setStep}
-                    setStep={setStep}
+          doctor={doctor}
-                    doctor={doctor}
+        />
-                />
+      </div>
-            </div>
+    </div>
-        </div>
+  );
-    )
 }
 
-export default Date
+export default Date;

components/booking/detail/Content.js

@@ -1,17 +1,17 @@
 function Content({ isConfirmed, children, title }) {
   return (
-    <div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
+    <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
-      <div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
+      <div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
         <p className="text-[#525252] text-[14px] font-medium">{title}</p>
         {isConfirmed && (
-          <p
+          <p className="py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal">
-            className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
+            تایید شده
-          >تایید شده</p>
+          </p>
         )}
       </div>
       {children}
     </div>
-  )
+  );
 }
 
-export default Content
+export default Content;

components/booking/detail/Form.js

@@ -3,34 +3,40 @@ import EditField from "../../../app/component/EditField";
 import Content from "./Content";
 
 const bime = [
-    { label: 'بیمه 1', id: 10 },
+  { label: "بیمه 1", id: 10 },
-    { label: 'بیمه 2', id: 20 },
+  { label: "بیمه 2", id: 20 },
-    { label: 'بیمه 3', id: 30 }
+  { label: "بیمه 3", id: 30 },
 ];
 
 function Form({ changeData, data, updateSelect, isForAnother }) {
-    return (
+  return (
-        <div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start 
+    <div
-        justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
+      className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start 
-            <Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
+        justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
-                <EditField changeData={changeData} data={data?.phone} name='phone' />
+    >
-            </Content>
+      <Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
-            <Content title='کد ملی'>
+        <EditField changeData={changeData} data={data?.phone} name="phone" />
-                <EditField changeData={changeData} data={data?.codemeli} name='codemeli' />
+      </Content>
-            </Content>
+      <Content title="کد ملی">
-            <Content title='نام و نام خانوادگی'>
+        <EditField
-                <EditField changeData={changeData} data={data?.name} name='name' />
+          changeData={changeData}
-            </Content>
+          data={data?.codemeli}
-            <Content title='نوع بیمه'>
+          name="codemeli"
-                <AutoCompleteSelect
+        />
-                    updateData={updateSelect}
+      </Content>
-                    label='نوع بیمه'
+      <Content title="نام و نام خانوادگی">
-                    name='first'
+        <EditField changeData={changeData} data={data?.name} name="name" />
-                    list={bime}
+      </Content>
-                />
+      <Content title="نوع بیمه">
-            </Content>
+        <AutoCompleteSelect
-        </div>
+          updateData={updateSelect}
-    )
+          label="نوع بیمه"
+          name="first"
+          list={bime}
+        />
+      </Content>
+    </div>
+  );
 }
 
-export default Form
+export default Form;

components/booking/detail/index.js

@@ -5,73 +5,89 @@ import ArrowLeftB from "@/components/icons/ArrowLeftB";
 import ButtonFixed from "../paying/ButtonFixed";
 import Form from "./Form";
 
-function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeElement, setIsPay }) {
+function Detail({
+  isForAnother,
+  setStep,
+  setIsForAnother,
+  data,
+  setData,
+  fadeElement,
+  setIsPay,
+}) {
+  const [selected, setSelected] = useState({
+    first: "",
+    second: "",
+  });
 
-    const [selected, setSelected] = useState({
+  const changeData = (value, type, name) =>
-        first: '',
+    setData({
-        second: ''
+      ...data,
+      [name]: {
+        ...data[name],
+        [type]: value,
+      },
     });
 
-    const changeData = (value, type, name) =>
+  const updateSelect = (event, name) =>
-        setData({
+    setSelected({ ...selected, [name]: event.target.innerText });
-            ...data,
-            [name]: {
-                ...data[name],
-                [type]: value
-            }
-        });
 
-    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+  return (
-
+    // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
-    return (
+    <div className="w-full lg:w-[59%]">
-        // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
+      <div
-        <div className="w-full lg:w-[59%]">
+        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
-            <div
-                className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
             rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
             `}
-            >
+      >
-                <p className="text-[#3B3B3B] text-[20px] font-bold">
+        <p className="text-[#3B3B3B] text-[20px] font-bold">
-                    {isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
+          {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
-                </p>
+        </p>
-                <Form
+        <Form
-                    isForAnother={isForAnother}
+          isForAnother={isForAnother}
-                    updateSelect={updateSelect}
+          updateSelect={updateSelect}
-                    changeData={changeData}
+          changeData={changeData}
-                    data={data}
+          data={data}
-                />
+        />
-                {!isForAnother && (
+        {!isForAnother && (
-                    <Button
+          <Button
-                        className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
+            className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
-                        onClick={() => {
+            onClick={() => {
-                            setIsForAnother(true)
+              setIsForAnother(true);
-                            setData({
+              setData({
-                                phone: { value: '09121056987', isEdit: false },
+                phone: { value: "09121056987", isEdit: false },
-                                codemeli: { value: '1741025645', isEdit: false },
+                codemeli: { value: "1741025645", isEdit: false },
-                                name: { value: 'ساغر صابری نژاد', isEdit: false }
+                name: { value: "ساغر صابری نژاد", isEdit: false },
-                            });
+              });
-                        }}
+            }}
-                    >
+          >
-                        <AddCircleBlueA />
+            <AddCircleBlueA />
-                        <p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
+            <p className="text-[#5559CE] text-[16px] font-medium">
-                    </Button>
+              دریافت نوبت برای فرد دیگر{" "}
-                )}
+            </p>
-                <ButtonFixed>
+          </Button>
-                    <Button
+        )}
-                        className={`
+        <ButtonFixed>
+          <Button
+            className={`
                     !flex !w-full md:!w-fit
                     !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
-                    ${isForAnother ? '!mt-0 md:!mt-[40px]' : '!mt-0 md:!mt-[32px]'}`}
+                    ${
-                        variant="contained"
+                      isForAnother
-                        onClick={() => setStep(prev => prev + 1)}
+                        ? "!mt-0 md:!mt-[40px]"
-                    >
+                        : "!mt-0 md:!mt-[32px]"
-                        <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
+                    }`}
-                        <ArrowLeftB />
+            variant="contained"
-                    </Button>
+            onClick={() => setStep((prev) => prev + 1)}
-                </ButtonFixed>
+          >
-            </div>
+            <p className="text-[#EFEFEF] text-[16px] font-medium">
-        </div>
+              ثبت اطلاعات
-    )
+            </p>
+            <ArrowLeftB />
+          </Button>
+        </ButtonFixed>
+      </div>
+    </div>
+  );
 }
 
-export default Detail
+export default Detail;

components/booking/failedPay/index.js

@@ -5,40 +5,46 @@ import RefreshA from "@/components/icons/RefreshA";
 import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
 
 function FailedPay({ setStep, fadeElement }) {
-    return (
+  return (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
-            <div
+      <div
-                className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
+        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
                 rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
+      >
+        <div className="mt-[7px]">
+          <div className="flex flex-col justify-center items-center gap-[14px]">
+            <InfoCircleRedA />
+            <p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+              پرداخت شما انجام نشد.
+            </p>
+          </div>
+          <div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
+            <Link href="/">
+              <Button
+                variant="outlined"
+                className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+              >
+                <RedoA />
+                <p className="text-[#5559CE] text-[16px] font-medium">
+                  صفحه اصلی
+                </p>
+              </Button>
+            </Link>
+            <Button
+              variant="contained"
+              onClick={() => setStep((prev) => prev - 2)}
+              className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
             >
-                <div className="mt-[7px]">
+              <RefreshA />
-                    <div className="flex flex-col justify-center items-center gap-[14px]">
+              <p className="text-[#FAFAFA] text-[16px] font-medium">
-                        <InfoCircleRedA />
+                تلاش دوباره
-                        <p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
+              </p>
-                    </div>
+            </Button>
-                    <div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
+          </div>
-                        <Link href='/'>
-                            <Button
-                                variant="outlined"
-                                className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
-                            >
-                                <RedoA />
-                                <p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
-                            </Button>
-                        </Link>
-                        <Button
-                            variant="contained"
-                            onClick={() => setStep(prev => prev - 2)}
-                            className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
-                        >
-                            <RefreshA />
-                            <p className="text-[#FAFAFA] text-[16px] font-medium">تلاش دوباره</p>
-                        </Button>
-                    </div>
-                </div>
-            </div>
         </div>
-    )
+      </div>
+    </div>
+  );
 }
 
-export default FailedPay
+export default FailedPay;

components/booking/index.js

@@ -1,19 +1,32 @@
-import Information from "./information"
+import Information from "./information";
-import Location from "./location"
+import Location from "./location";
 
-function BookingPage({ doctor, step, setStep, children, isFirst, disableSide }) {
+function BookingPage({
-    return (
+  doctor,
-        <div
+  step,
-            className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
+  setStep,
-            items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
+  children,
-            {isFirst ? (
+  isFirst,
-                <Location disableSide={disableSide} doctor={doctor} />
+  disableSide,
-            ) : (
+}) {
-                <Information disableSide={disableSide} doctor={doctor} step={step} setStep={setStep} />
+  return (
-            )}
+    <div
-            {children}
+      className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
-        </div>
+            items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
-    )
+    >
+      {isFirst ? (
+        <Location disableSide={disableSide} doctor={doctor} />
+      ) : (
+        <Information
+          disableSide={disableSide}
+          doctor={doctor}
+          step={step}
+          setStep={setStep}
+        />
+      )}
+      {children}
+    </div>
+  );
 }
 
-export default BookingPage
+export default BookingPage;

components/booking/information/Detail.js

@@ -1,94 +1,113 @@
-import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
+import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
-import CalendarA from "@/components/icons/CalendarA"
+import CalendarA from "@/components/icons/CalendarA";
-import ClockA from "@/components/icons/ClockA"
+import ClockA from "@/components/icons/ClockA";
-import LocationA from "@/components/icons/LocationA"
+import LocationA from "@/components/icons/LocationA";
-import TickCircleOrange from "@/components/icons/TickCircleOrange"
+import TickCircleOrange from "@/components/icons/TickCircleOrange";
-import { Button } from "@mui/material"
+import { Button } from "@mui/material";
 
 function Detail({ doctor, step, setStep }) {
-    return (
+  return (
-        <div className="">
+    <div className="">
-            <ul className="flex flex-col items-start justify-start gap-[24px]">
+      <ul className="flex flex-col items-start justify-start gap-[24px]">
-                <li className="flex items-center justify-start gap-[4px]">
+        <li className="flex items-center justify-start gap-[4px]">
-                    <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+          <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
-                        <LocationA />
+            <LocationA />
-                    </div>
+          </div>
-                    <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
+          <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
-                </li>
+            آدرس: {doctor.location}
-                <li className="flex items-center justify-between w-full">
+          </p>
-                    <div className="flex items-center justify-start gap-[4px]">
+        </li>
-                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+        <li className="flex items-center justify-between w-full">
-                            <CalendarA />
+          <div className="flex items-center justify-start gap-[4px]">
-                        </div>
+            <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
-                        <div className="flex items-center justify-start">
+              <CalendarA />
-                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
+            </div>
-                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
+            <div className="flex items-center justify-start">
-                        </div>
+              <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-                    </div>
+                تاریخ نوبت:{" "}
-                    {step < 5 && (
+              </p>
-                        <Button
+              <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
-                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                13 خرداد 1403
-                            onClick={() => setStep(0)}
+              </p>
-                            variant="text"
+            </div>
-                        >
+          </div>
-                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+          {step < 5 && (
-                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+            <Button
-                                <ArrowLeftOrangeA />
+              className="!p-1 !flex !items-center !justify-end !gap-[2px]"
-                            </div>
+              onClick={() => setStep(0)}
-                        </Button>
+              variant="text"
-                    )}
+            >
-                </li>
+              <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
-                <li className="flex items-center justify-between w-full">
+                تغییر{" "}
-                    <div className="flex items-center justify-start gap-[4px]">
+              </p>
-                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+              <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
-                            <ClockA />
+                <ArrowLeftOrangeA />
-                        </div>
+              </div>
-                        <div className="flex items-center justify-start">
+            </Button>
-                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
+          )}
-                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
+        </li>
-                        </div>
+        <li className="flex items-center justify-between w-full">
-                    </div>
+          <div className="flex items-center justify-start gap-[4px]">
-                    {step < 5 && (
+            <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
-                        <Button
+              <ClockA />
-                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+            </div>
-                            onClick={() => setStep(0)}
+            <div className="flex items-center justify-start">
-                            variant="text"
+              <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-                        >
+                زمان نوبت:{" "}
-                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+              </p>
-                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+              <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
-                                <ArrowLeftOrangeA />
+                ساعت 17:20
-                            </div>
+              </p>
-                        </Button>
+            </div>
-                    )}
+          </div>
-                </li>
+          {step < 5 && (
-            </ul>
+            <Button
-            <span
+              className="!p-1 !flex !items-center !justify-end !gap-[2px]"
-                className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
+              onClick={() => setStep(0)}
+              variant="text"
+            >
+              <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
+                تغییر{" "}
+              </p>
+              <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                <ArrowLeftOrangeA />
+              </div>
+            </Button>
+          )}
+        </li>
+      </ul>
+      <span
+        className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
                 mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] 
                 w-full h-px bg-[#D7D7D7] block"
-            ></span>
+      ></span>
-            <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
+      <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
-                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+        <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
-                    <div
+          <div
-                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
                         w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
-                    >
+          >
-                        <TickCircleOrange />
+            <TickCircleOrange />
-                    </div>
+          </div>
-                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+          <p className="text-[#616161] text-[16px] font-normal">
-                </li>
+            فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
-                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+            ممکن می باشد.
-                    <div
+          </p>
-                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+        </li>
+        <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+          <div
+            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
                         w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
-                    >
+          >
-                        <TickCircleOrange />
+            <TickCircleOrange />
-                    </div>
+          </div>
-                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+          <p className="text-[#616161] text-[16px] font-normal">
-                </li>
+            لطفا به موقع در مطب حضور داشته باشید.
-            </ul>
+          </p>
-        </div>
+        </li>
-    )
+      </ul>
+    </div>
+  );
 }
 
-export default Detail
+export default Detail;

components/booking/information/Head.js

@@ -1,29 +1,35 @@
-import Image from "next/image"
+import Image from "next/image";
 
 function Head({ doctor }) {
-    return (
+  return (
-        <div className="
+    <div
+      className="
             flex items-center justify-start 
             gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] 
             mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
             mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
-        ">
+        "
-            <Image
+    >
-                className="
+      <Image
+        className="
                     w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
                     h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
                 "
-                alt="profile doctor"
+        alt="profile doctor"
-                src={doctor.img}
+        src={doctor.img}
-                height={95}
+        height={95}
-                width={95}
+        width={95}
-            />
+      />
-            <div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
+      <div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
-                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
+        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
-                <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+          {doctor.name}
-            </div>
+        </p>
-        </div>
+        <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-    )
+          تخصص: {doctor.expertise}
+        </p>
+      </div>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/booking/information/index.js

@@ -1,22 +1,30 @@
-import Detail from "./Detail"
+import Detail from "./Detail";
-import Head from "./Head"
+import Head from "./Head";
 
 function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
-    return (
+  return (
-        <div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
+    <div
-            <div
+      className={`w-full lg:w-[41%] relative ${
-                className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border 
+        disableSide ? "hidden lg:flex" : ""
+      }`}
+    >
+      <div
+        className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border 
                     border-solid border-[#EFEFEF] bg-[#FFF] 
                     top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
-                    ${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
+                    ${
+                      typePay === "success" || typePay === "failed"
+                        ? "hidden md:block"
+                        : "block"
+                    }
                 `}
-            >
+      >
-                <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
+        <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
-                <Head doctor={doctor} />
+        <Head doctor={doctor} />
-                <Detail doctor={doctor} step={step} setStep={setStep} />
+        <Detail doctor={doctor} step={step} setStep={setStep} />
-            </div>
+      </div>
-        </div>
+    </div>
-    )
+  );
 }
 
-export default Information
+export default Information;

components/booking/location/Address.js

@@ -1,21 +1,19 @@
 function Address({ doctor }) {
-    return (
+  return (
-        <ul className='hidden mt-[4px] lg:flex flex-col'>
+    <ul className="hidden mt-[4px] lg:flex flex-col">
-            {doctor.address.map((item, idx) => (
+      {doctor.address.map((item, idx) => (
-                <li
+        <li key={idx}>
-                    key={idx}
+          <div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
-                >
+            <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
-                    <div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
+            <p className="font-normal">{item.location}</p>
-                        <p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
+          </div>
-                        <p className='font-normal'>{item.location}</p>
+          {doctor.address.length > idx + 1 && (
-                    </div>
+            <span className="bg-[#EFEFEF] block h-px w-full"></span>
-                    {doctor.address.length > idx + 1 && (
+          )}
-                        <span className='bg-[#EFEFEF] block h-px w-full'></span>
+        </li>
-                    )}
+      ))}
-                </li>
+    </ul>
-            ))}
+  );
-        </ul>
-    )
 }
 
-export default Address
+export default Address;

components/booking/location/Head.js

@@ -1,24 +1,28 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 function Head({ doctor }) {
-    return (
+  return (
-        <div className="flex items-center justify-start gap-[12px]">
+    <div className="flex items-center justify-start gap-[12px]">
-            <Image
+      <Image
-                className='
+        className="
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
-                '
+                "
-                src={doctor.img}
+        src={doctor.img}
-                alt="profile"
+        alt="profile"
-                height={56}
+        height={56}
-                width={56}
+        width={56}
-            />
+      />
-            <div className="flex flex-col items-start justify-start gap-[8px]">
+      <div className="flex flex-col items-start justify-start gap-[8px]">
-                <p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
+        <p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
-                <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+          {doctor.name}
-            </div>
+        </p>
-        </div>
+        <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
-    )
+          تخصص: {doctor.expertise}
+        </p>
+      </div>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/booking/location/index.js

@@ -2,18 +2,18 @@ import Address from "./Address";
 import Head from "./Head";
 
 function Location({ doctor }) {
-    return (
+  return (
-        <div className="h-fit lg:h-screen w-full lg:w-[39%]">
+    <div className="h-fit lg:h-screen w-full lg:w-[39%]">
-            <div
+      <div
-                className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
+        className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
                 top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
-            >
+      >
-                <Head doctor={doctor} />
+        <Head doctor={doctor} />
-                <span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
+        <span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
-                <Address doctor={doctor} />
+        <Address doctor={doctor} />
-            </div>
+      </div>
-        </div>
+    </div>
-    )
+  );
 }
 
-export default Location
+export default Location;

components/booking/paying/ButtonFixed.js

@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 function ButtonFixed({ children }) {
-    return (
+  return (
-        <div
+    <div
-            className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
+      className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
         md:border-t-transparent border-[#D7D7D7] z-10
         !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
-        >
+    >
-            {children}
+      {children}
-        </div>
+    </div>
-    )
+  );
 }
 
-export default ButtonFixed
+export default ButtonFixed;

components/booking/paying/index.js

@@ -1,38 +1,46 @@
-import ArrowLeftB from '@/components/icons/ArrowLeftB';
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
-import { Button } from '@mui/material';
+import { Button } from "@mui/material";
-import ButtonFixed from './ButtonFixed';
+import ButtonFixed from "./ButtonFixed";
 
 function Paying({ setTypePay, fadeElement, setStep }) {
-    return (
+  return (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
-            <div
+      <div
-                className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
                 rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
-            >
+      >
-                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
-                    اطلاعات پرداخت
+          اطلاعات پرداخت
-                </p>
+        </p>
-                <div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
+        <div className="flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
-                    <p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
+          <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-                    <p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
+            مبلغ پیش پرداخت (بیعانه) :{" "}
-                </div>
+          </p>
-                <span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
+          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
-                <ButtonFixed>
+            20،000 تومان
-                    <div className='flex items-center justify-between gap-2'>
+          </p>
-                        <p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
-                        <Button
-                            className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
-                            onClick={() => setStep(prev => prev + 1)}
-                            variant="contained"
-                        >
-                            <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
-                            <ArrowLeftB />
-                        </Button>
-                    </div>
-                </ButtonFixed>
-            </div>
         </div>
-    )
+        <span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
+        <ButtonFixed>
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
+              مبلغ قابل پرداخت : 20،000 تومان
+            </p>
+            <Button
+              className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
+              onClick={() => setStep((prev) => prev + 1)}
+              variant="contained"
+            >
+              <p className="text-[#EFEFEF] text-[16px] font-medium">
+                پرداخت نهایی
+              </p>
+              <ArrowLeftB />
+            </Button>
+          </div>
+        </ButtonFixed>
+      </div>
+    </div>
+  );
 }
 
-export default Paying
+export default Paying;

components/booking/successPay/index.js

@@ -1,46 +1,56 @@
-import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
+import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA";
-import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
+import TickCircleGreenA from "@/components/icons/TickCircleGreenA";
-import { Button } from "@mui/material"
+import { Button } from "@mui/material";
-import Link from "next/link"
+import Link from "next/link";
 
 function SuccessPay({ setStep }) {
-    return (
+  return (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
-            <div
+      <div
-                className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
+        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
                 rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
-            >
+      >
-                <div className="pt-[8px] pb-[4px] grid place-items-center">
+        <div className="pt-[8px] pb-[4px] grid place-items-center">
-                    <div className="flex flex-col justify-center items-center gap-[14px]">
+          <div className="flex flex-col justify-center items-center gap-[14px]">
-                        <TickCircleGreenA />
+            <TickCircleGreenA />
-                        <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
+            <p className="text-[#3B3B3B] text-[20px] font-bold">
-                    </div>
+              پرداخت شما با موفقیت انجام شد.
-                    <p
+            </p>
-                        className="text-[#3B3B3B] text-[16px] font-normal 
+          </div>
+          <p
+            className="text-[#3B3B3B] text-[16px] font-normal 
                 mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] 
                 mb-[24px] md:mb-[16px]"
-                    >برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
+          >
-                    <div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
+            برای نمایش نوبت ها به قسمت نوبت های من بروید.{" "}
-                        <span className="w-full block h-px bg-[#EFEFEF]"></span>
+          </p>
-                        <div className="flex items-center justify-between my-[20px] gap-[80px]">
+          <div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
-                            <p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
+            <span className="w-full block h-px bg-[#EFEFEF]"></span>
-                            <p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
+            <div className="flex items-center justify-between my-[20px] gap-[80px]">
-                        </div>
+              <p className="text-[#616161] text-[14px] font-medium">
-                        <span className="w-full block h-px bg-[#EFEFEF]"></span>
+                مقدار پرداخت شده:{" "}
-                    </div>
+              </p>
-                    <Link href='/dashboard'>
+              <p className="text-[#05BA58] text-[14px] font-bold">
-                        <Button
+                20،000 تومان
-                            variant="text"
+              </p>
-                            className="!flex !items-center !justify-center !gap-[4px]"
-                        >
-                            <p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
-                            <ArrowLeftBlueA />
-                        </Button>
-                    </Link>
-                </div>
             </div>
+            <span className="w-full block h-px bg-[#EFEFEF]"></span>
+          </div>
+          <Link href="/dashboard">
+            <Button
+              variant="text"
+              className="!flex !items-center !justify-center !gap-[4px]"
+            >
+              <p className="text-[16px] font-medium text-[#5559CE]">
+                برو به نوبت های من
+              </p>
+              <ArrowLeftBlueA />
+            </Button>
+          </Link>
         </div>
-    )
+      </div>
+    </div>
+  );
 }
 
-export default SuccessPay
+export default SuccessPay;

components/clinic/components/about/ContentDetail.js

@@ -1,17 +1,15 @@
-import TextLoading from '@/app/component/loading/Text'
+import TextLoading from "@/app/component/loading/Text";
-import React from 'react'
+import React from "react";
 
 function ContentDetail({ head, children, loading }) {
-    return (
+  return (
-        <div className='my-[24px]'>
+    <div className="my-[24px]">
-            <TextLoading width={200} height={20} loading={loading}>
+      <TextLoading width={200} height={20} loading={loading}>
-                <p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
+        <p className="text-[#3B3B3B] text-[20px] font-bold">{head}</p>
-            </TextLoading>
+      </TextLoading>
-            <div className='mt-[16px]'>
+      <div className="mt-[16px]">{children}</div>
-                {children}
+    </div>
-            </div>
+  );
-        </div>
-    )
 }
 
-export default ContentDetail
+export default ContentDetail;

components/clinic/components/about/ListBime.js

@@ -1,27 +1,24 @@
-import CustomLoading from '@/app/component/loading/Custom'
+import CustomLoading from "@/app/component/loading/Custom";
-import Image from 'next/image'
+import Image from "next/image";
 
 function ListBime({ data, loading }) {
-    return (
+  return (
-        <ul className='flex overflow-auto hidden-scroll  mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
+    <ul className="flex overflow-auto hidden-scroll  mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
-            {data.list_bime.map((item, idx) => (
+      {data.list_bime.map((item, idx) => (
-                <CustomLoading width={156} height={110} loading={loading}>
+        <CustomLoading width={156} height={110} loading={loading}>
-                    <li
+          <li
-                        key={idx}
+            key={idx}
-                        className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
+            className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
-                    >
+          >
-                        <Image
+            <Image src={item.img} height={92} width={92} alt="bime" />
-                            src={item.img}
+            <p className="text-[#525252] text-[16px] font-medium">
-                            height={92}
+              {item.name}
-                            width={92}
+            </p>
-                            alt='bime'
+          </li>
-                        />
+        </CustomLoading>
-                        <p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
+      ))}
-                    </li>
+    </ul>
-                </CustomLoading>
+  );
-            ))}
-        </ul>
-    )
 }
 
-export default ListBime
+export default ListBime;

components/clinic/components/about/Services.js

@@ -1,32 +1,33 @@
-import TextLoading from '@/app/component/loading/Text';
+import TextLoading from "@/app/component/loading/Text";
-import TickCircleOrange from '@/components/icons/TickCircleOrange';
+import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
 function Services({ data, loading }) {
   return (
-    <ul className='
+    <ul
+      className="
     mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
     gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
-    gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
+    gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
+    >
       {data.specialties.map((item, idx) => (
-        <li
+        <li key={idx} className="flex items-start justify-start gap-2">
-          key={idx}
+          <div className="min-w-[24px] min-h-[24px]">
-          className='flex items-start justify-start gap-2'
-        >
-          <div className='min-w-[24px] min-h-[24px]'>
             <TickCircleOrange />
           </div>
           <TextLoading width={80} height={18} loading={loading}>
             <p
               className={`
             text-[16px] font-normal 
-            ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
+            ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
           `}
-            >{item}</p>
+            >
+              {item}
+            </p>
           </TextLoading>
         </li>
       ))}
     </ul>
-  )
+  );
 }
 
-export default Services
+export default Services;

components/clinic/components/about/Specialties.js

@@ -1,32 +1,33 @@
-import TextLoading from '@/app/component/loading/Text';
+import TextLoading from "@/app/component/loading/Text";
-import TickCircleOrange from '@/components/icons/TickCircleOrange';
+import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
 function Specialties({ data, loading }) {
-    return (
+  return (
-        <ul className='
+    <ul
+      className="
         mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
         gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
-        gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
+        gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
-            {data.specialties.map((item, idx) => (
+    >
-                <li
+      {data.specialties.map((item, idx) => (
-                    key={idx}
+        <li key={idx} className="flex items-start justify-start gap-2">
-                    className='flex items-start justify-start gap-2'
+          <div className="min-w-[24px] min-h-[24px]">
-                >
+            <TickCircleOrange />
-                    <div className='min-w-[24px] min-h-[24px]'>
+          </div>
-                        <TickCircleOrange />
+          <TextLoading width={80} height={18} loading={loading}>
-                    </div>
+            <p
-                    <TextLoading width={80} height={18} loading={loading}>
+              className={`
-                        <p
-                            className={`
                         text-[16px] font-normal
-                        ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
+                        ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
                     `}
-                        >{item}</p>
+            >
-                    </TextLoading>
+              {item}
-                </li>
+            </p>
-            ))}
+          </TextLoading>
-        </ul>
+        </li>
-    )
+      ))}
+    </ul>
+  );
 }
 
-export default Specialties
+export default Specialties;

components/clinic/components/about/images/Images.js

@@ -1,30 +1,31 @@
-import List from './List';
+import List from "./List";
-import Slider from './Slider';
+import Slider from "./Slider";
-import Image from 'next/image';
+import Image from "next/image";
-import CustomLoading from '@/app/component/loading/Custom';
+import CustomLoading from "@/app/component/loading/Custom";
 
 function Images({ data, loading }) {
-    return (
+  return (
-        <div
+    <div
-            className='
+      className="
             flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
             gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
-        '>
+        "
-            <div className='w-full'>
+    >
-                <CustomLoading loading={loading} width={600} height={400}>
+      <div className="w-full">
-                    <Image
+        <CustomLoading loading={loading} width={600} height={400}>
-                        className="rounded-[8px] overflow-hidden"
+          <Image
-                        src={data.images_clinic[0]}
+            className="rounded-[8px] overflow-hidden"
-                        alt="img clinic"
+            src={data.images_clinic[0]}
-                        height={432}
+            alt="img clinic"
-                        width={600}
+            height={432}
-                    />
+            width={600}
-                </CustomLoading>
+          />
-            </div>
+        </CustomLoading>
-            <List data={data} loading={loading} />
+      </div>
-            <Slider data={data} loading={loading} />
+      <List data={data} loading={loading} />
-        </div>
+      <Slider data={data} loading={loading} />
-    )
+    </div>
+  );
 }
 
-export default Images
+export default Images;

components/clinic/components/about/images/List.js

@@ -1,55 +1,55 @@
-import CustomLoading from '@/app/component/loading/Custom';
+import CustomLoading from "@/app/component/loading/Custom";
-import Image from 'next/image';
+import Image from "next/image";
 
 function List({ data, loading }) {
-    return (
+  return (
-        <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
+    <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
-                    <Image
+          <Image
-                        className="rounded-[8px] overflow-hidden"
+            className="rounded-[8px] overflow-hidden"
-                        src={data.images_clinic[1]}
+            src={data.images_clinic[1]}
-                        alt="img clinic"
+            alt="img clinic"
-                        height={204}
+            height={204}
-                        width={288}
+            width={288}
-                    />
+          />
-                </CustomLoading>
+        </CustomLoading>
-            </div>
+      </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
-                    <Image
+          <Image
-                        className="rounded-[8px] overflow-hidden"
+            className="rounded-[8px] overflow-hidden"
-                        src={data.images_clinic[2]}
+            src={data.images_clinic[2]}
-                        alt="img clinic"
+            alt="img clinic"
-                        height={204}
+            height={204}
-                        width={288}
+            width={288}
-                    />
+          />
-                </CustomLoading>
+        </CustomLoading>
-            </div>
+      </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
-                    <Image
+          <Image
-                        className="rounded-[8px] overflow-hidden"
+            className="rounded-[8px] overflow-hidden"
-                        src={data.images_clinic[3]}
+            src={data.images_clinic[3]}
-                        alt="img clinic"
+            alt="img clinic"
-                        height={204}
+            height={204}
-                        width={288}
+            width={288}
-                    />
+          />
-                </CustomLoading>
+        </CustomLoading>
-            </div>
+      </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
-                    <Image
+          <Image
-                        className="rounded-[8px] overflow-hidden"
+            className="rounded-[8px] overflow-hidden"
-                        src={data.images_clinic[4]}
+            src={data.images_clinic[4]}
-                        alt="img clinic"
+            alt="img clinic"
-                        height={204}
+            height={204}
-                        width={288}
+            width={288}
-                    />
+          />
-                </CustomLoading>
+        </CustomLoading>
-            </div>
+      </div>
-        </div>
+    </div>
-    )
+  );
 }
 
-export default List
+export default List;

components/clinic/components/about/images/Slider.js

@@ -1,24 +1,25 @@
-import CustomLoading from "@/app/component/loading/Custom"
+import CustomLoading from "@/app/component/loading/Custom";
-import Image from "next/image"
+import Image from "next/image";
 
 function Slider({ data, loading }) {
-    return (
+  return (
-        <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
+    <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
-            {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
+      {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
-                idx !== 0 ? (
+        idx !== 0 ? (
-                    <CustomLoading width={90} height={90} loading={loading}>
+          <CustomLoading width={90} height={90} loading={loading}>
-                        <Image
+            <Image
-                            key={idx}
+              key={idx}
-                            src={item}
+              src={item}
-                            width={90}
+              width={90}
-                            height={90}
+              height={90}
-                            alt="image clinic"
+              alt="image clinic"
-                            className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
+              className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
-                        />
+            />
-                    </CustomLoading>
+          </CustomLoading>
-                ) : undefined)}
+        ) : undefined
-        </ul>
+      )}
-    )
+    </ul>
+  );
 }
 
-export default Slider
+export default Slider;

components/clinic/components/about/index.js

@@ -9,48 +9,55 @@ import ContentDetail from "./ContentDetail";
 import MultilineLoading from "@/app/component/loading/Multiline";
 
 function About({ data, loading }) {
+  const [isMore, setIsMore] = useState(false);
 
-    const [isMore, setIsMore] = useState(false);
+  return (
-
+    <div className="opacity-page transition-all duration-500">
-    return (
+      <Images data={data} loading={loading} />
-        <div className="opacity-page transition-all duration-500">
+      <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
-            <Images data={data} loading={loading} />
+        <div className="flex flex-col items-center justify-center">
-            <ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
+          <MultilineLoading
-                <div className="flex flex-col items-center justify-center">
+            line={10}
-                    <MultilineLoading line={10} loading={loading} width='full' height={18}>
+            loading={loading}
-                        <p
+            width="full"
-                            className={`
+            height={18}
+          >
+            <p
+              className={`
                         text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
                         after:absolute after:right-0 after:bottom-0 after:h-[80px]
                         after:shadow-xl after:w-full transition-all duration-500
-                        ${isMore ?
+                        ${
-                                    'after:bg-transparent max-h-screen' :
+                          isMore
-                                    'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
+                            ? "after:bg-transparent max-h-screen"
-                                }
+                            : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
+                        }
                     `}
-                            dangerouslySetInnerHTML={{ __html: data.caption }}
+              dangerouslySetInnerHTML={{ __html: data.caption }}
-                        ></p>
+            ></p>
-                    </MultilineLoading>
+          </MultilineLoading>
-                    <Button
+          <Button
-                        className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
+            className={`${
-                        onClick={() => setIsMore(!isMore)}
+              loading && "!hidden"
-                        variant="text"
+            } !text-[#F17732] !text-[14px] !font-light !p-2`}
-                    >
+            onClick={() => setIsMore(!isMore)}
-                        {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+            variant="text"
-                    </Button>
+          >
-                </div>
+            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
-            </ContentDetail>
+          </Button>
-            <ContentDetail head='بیمه های طرف قرارداد'>
-                <ListBime loading={loading} data={data} />
-            </ContentDetail>
-            <ContentDetail head='تخصص ها'>
-                <Specialties loading={loading} data={data} />
-            </ContentDetail>
-            <ContentDetail head='خدمات'>
-                <Services loading={loading} data={data} />
-            </ContentDetail>
         </div>
-    )
+      </ContentDetail>
+      <ContentDetail head="بیمه های طرف قرارداد">
+        <ListBime loading={loading} data={data} />
+      </ContentDetail>
+      <ContentDetail head="تخصص ها">
+        <Specialties loading={loading} data={data} />
+      </ContentDetail>
+      <ContentDetail head="خدمات">
+        <Services loading={loading} data={data} />
+      </ContentDetail>
+    </div>
+  );
 }
 
-export default About
+export default About;