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 (
-        <Layout title='درباره ما' name='about-us'>
+    <Layout title="درباره ما" name="about-us">
       <AboutUsPage />
     </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'>
+    <Layout title="وبلاگ" name="blog">
-            <BlogPage
+      <BlogPage article={article} articles={articles} />
-                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 (
-        <Layout title='وبلاگ ها' name='blogs'>
+    <Layout title="وبلاگ ها" name="blogs">
       <BlogsPage />
     </Layout>
-    )
+  );
 }
 
-export default Blogs
+export default Blogs;

app/booking/[slug]/page.js

@@ -1,54 +1,57 @@
-'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 [data, setData] = useState({
-        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 },
   });
 
   const elements = [
     <Date doctor={doctor} setStep={setStep} />,
     <LogInPage setIsSendMsg={false} setStep={setStep} />,
     <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
-        <Detail isForAnother={isForAnother} setIsForAnother={setIsForAnother} setStep={setStep} data={data} setData={setData} />,
+    <Detail
+      isForAnother={isForAnother}
+      setIsForAnother={setIsForAnother}
+      setStep={setStep}
+      data={data}
+      setData={setData}
+    />,
     <Paying setStep={setStep} />,
     <SuccessPay setStep={setStep} />,
-        <FailedPay setStep={setStep} />
+    <FailedPay setStep={setStep} />,
-    ]
+  ];
 
   return (
     <>
       {step === 1 || step === 2 ? (
-                <RegisterPage>
+        <RegisterPage>{elements[step]}</RegisterPage>
-                    {elements[step]}
-                </RegisterPage>
       ) : (
         <Layout
-                    title='رزرو'
+          title="رزرو"
-                    name='booking'
+          name="booking"
           disableFooter={step > 2}
-                    paddingBottom='pb-[80px]'
+          paddingBottom="pb-[80px]"
         >
           <BookingPage
             disableSide={step === 5 || step === 6}
@@ -62,7 +65,7 @@ function Booking({ params: { slug } }) {
         </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'>
+    <Layout title="کلینیک" name="clinic">
-            <ClinicPage
+      <ClinicPage data={clinic} doctors={doctors} />
-                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 (
-        <Layout title='کلینیک ها' name='clinics'>
+    <Layout title="کلینیک ها" name="clinics">
       <ClinicsPage />
     </Layout>
-    )
+  );
 }
 
-export default Clinics
+export default Clinics;

app/component/AnimationTextHead.js

@@ -1,16 +1,19 @@
 function AnimationTextHead({ name, text, children }) {
   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
           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"
+        >
+          {text}
+        </p>
       </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,26 +1,35 @@
-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 (
     <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={{
-                '&.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>
-                    <TableRow
+          <TableRow className="!bg-[#EFEFEF]">
-                        className='!bg-[#EFEFEF]'
-                    >
             {tableHead.map((item, idx) => (
               <TableCell
                 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}
@@ -28,12 +37,10 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
             ))}
           </TableRow>
         </TableHead>
-                <TableBody>
+        <TableBody>{children}</TableBody>
-                    {children}
-                </TableBody>
       </Table>
     </TableContainer>
-    )
+  );
 }
 
-export default CustomTable
+export default CustomTable;

app/component/EditField.js

@@ -1,8 +1,17 @@
-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({
+  changeData,
+  multiline,
+  icon,
+  placeholder,
+  data,
+  name,
+  iconGray,
+  isTransparent,
+}) {
   return (
     <div className="relative w-full">
       <TextField
@@ -10,46 +19,45 @@ function EditField({ changeData, multiline, icon, placeholder, data, name, iconG
         rows={multiline}
         multiline={multiline}
         disabled={!data?.isEdit}
-                placeholder={placeholder || ''}
+        placeholder={placeholder || ""}
-                type='text'
+        type="text"
-                className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
+        className={`!w-full res-field-account ${
-                onChange={e => {
+          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
-                    changeData(e.target.value, 'value', name)
+        }`}
+        onChange={(e) => {
+          changeData(e.target.value, "value", name);
         }}
         sx={{
-                    '& .MuiFormLabel-root': {
+          "& .MuiFormLabel-root": {
-                        top: '-4px !important'
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
             },
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
-                    '& .MuiInputBase-root': {
-                        padding: '0 !important',
-                        borderRadius: '8px !important'
           },
-                    '.Mui-focused': {
-                        '& .MuiOutlinedInput-notchedOutline': {
-                            border: '1px solid #5559CE !important',
-                            transition: '0.5s all'
-                        }
-                    }
         }}
       />
       <Button
         className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
-                    ${multiline ? '!top-[24px]' : '!top-1/2'}`}
+                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
         onClick={() => {
-                    changeData(!data.isEdit, 'isEdit', name)
+          changeData(!data.isEdit, "isEdit", name);
         }}
       >
-                {icon ? icon :
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
-                    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 (
     <TextField
       placeholder={isPlaceHolder && title}
-            label={!isPlaceHolder ? title : ''}
+      label={!isPlaceHolder ? title : ""}
-            type={type || 'text'}
+      type={type || "text"}
       multiline={!!multiline}
       rows={!!multiline ? 4 : 1}
       className="!w-full !mx-auto !bg-[#FFF]"
       sx={{
-                '& .MuiFormLabel-root': {
+        "& .MuiFormLabel-root": {
-                    top: '-4px !important'
+          top: "-4px !important",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #E9ECEF !important",
         },
-                '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                '& .MuiInputBase-root': { borderRadius: '6px !important' },
-                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
         ".Mui-focused": {
-                    '& .MuiOutlinedInput-notchedOutline': {
+          "& .MuiOutlinedInput-notchedOutline": {
-                        border: '1px solid #5559CE !important',
+            border: "1px solid #5559CE !important",
-                        transition: '0.5s all'
+            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 (
     <div className="relative w-full">
       <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={{
-                    '& .MuiFormLabel-root': {
+          "& .MuiFormLabel-root": {
-                        top: '-4px !important'
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
             },
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
-                    '& .MuiInputBase-root': {
-                        padding: '0 !important',
-                        borderRadius: '8px !important'
           },
-                    '.Mui-focused': {
-                        '& .MuiOutlinedInput-notchedOutline': {
-                            border: '1px solid #5559CE !important',
-                            transition: '0.5s all'
-                        }
-                    }
         }}
       />
-            <Button
+      <Button className="!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1">
-                className='!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1'
-            >
         {icon}
       </Button>
     </div>
-    )
+  );
 }
 
-export default FieldIcon
+export default FieldIcon;

app/component/ItemDoctor.js

@@ -27,20 +27,28 @@ function ItemDoctor({ doctor, loading }) {
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <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">
+              {doctor.name}
+            </p>
           </TextLoading>
           <TextLoading width={120} height={15} loading={loading}>
-                        <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
+            <p className="text-[#616161] text-[14px] font-normal">
+              تخصص: {doctor.expertise}
+            </p>
           </TextLoading>
           <CustomLoading width={100} height={25} loading={loading}>
             <div className="flex rounded items-center justify-start gap-2">
               <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                 <LikeD />
-                                <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                <p className="text-[#616161] text-[12px] font-normal">
+                  {doctor.satisfaction}%
+                </p>
               </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>
+                <p className="text-[#616161] text-[12px] font-normal">
+                  {doctor.point}
+                </p>
               </div>
             </div>
           </CustomLoading>
@@ -51,28 +59,31 @@ function ItemDoctor({ doctor, loading }) {
       <div className="flex my-4 items-center justify-start gap-0.5">
         <ClockD />
         <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">
+            ساعت کاری: {doctor.hours_of_work}
+          </p>
         </TextLoading>
       </div>
       <CustomLoading loading={loading} width={150} height={20}>
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
-                    ${doctor.free_turn ?
+                    ${
-                            'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
+                      doctor.free_turn
-                            'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
+                        ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
+                        : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
                     }`}
-                >{doctor.free_turn ?
+        >
-                    `اولین نوبت آزاد: ${doctor.free_turn}` :
+          {doctor.free_turn
-                    'نوبت ندارد'
+            ? `اولین نوبت آزاد: ${doctor.free_turn}`
-                    }</p>
+            : "نوبت ندارد"}
+        </p>
       </CustomLoading>
       {/* Arrow */}
       <Link href={`/doctor/${doctor.id}`}>
         <Button
           variant="contained"
           className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                     ${!doctor.free_turn || loading &&
+                     ${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
-                        '!bg-[#D7D7D7]'}
                     `}
           disabled={!doctor.free_turn || loading}
         >
@@ -80,7 +91,7 @@ function ItemDoctor({ doctor, loading }) {
         </Button>
       </Link>
     </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 (
-        <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]">
         <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}
           height={30}
           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">
+          نوبت ۷۲۴
+        </p>
       </div>
     </Link>
-    )
+  );
 }
 
-export default Logo
+export default Logo;

app/component/Pageguide.js

@@ -1,26 +1,31 @@
 function Pageguide({ list }) {
   return (
-        <ul className='flex items-center justify-start gap-1'>
+    <ul className="flex items-center justify-start gap-1">
       {list.map((item, idx) => (
-                <li
+        <li key={idx} className="flex items-center justify-start gap-1">
-                    key={idx}
-                    className="flex items-center justify-start gap-1"
-                >
           <p
             className={`text-[16px] font-normal
-                            ${list.length > idx + 1 ? 'text-[#9B9B9B]' : 'text-[#525252]'}
+                            ${
+                              list.length > idx + 1
+                                ? "text-[#9B9B9B]"
+                                : "text-[#525252]"
+                            }
                             `}
-                    >{item}</p>
+          >
+            {item}
+          </p>
           <span
             className={`
                             text-[#9B9B9B] text-[16px] font-normal
-                            ${list.length > idx + 1 ? 'flex' : 'hidden'}
+                            ${list.length > idx + 1 ? "flex" : "hidden"}
                             `}
-                    >{'>'}</span>
+          >
+            {">"}
+          </span>
         </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 (
     <PaginationMUI
       // count={doctors.length / 12} org
       count={20} // test
-            color='primary'
+      color="primary"
       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 (
     <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]">
+        {data.label}
+      </p>
       <LinearProgress
         value={data.progress}
         variant="determinate"
         className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
         sx={{
-                    '& .MuiLinearProgress-bar': {
+          "& .MuiLinearProgress-bar": {
-                        background: '#05BA58',
+            background: "#05BA58",
-                        borderRadius: '10px'
+            borderRadius: "10px",
-                    }
+          },
         }}
       />
-            <p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
+      <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">
-            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
+      <p className="text-[#525252] text-[14px] font-normal w-[118px]">
+        {data.label}
+      </p>
       <Slider
         defaultValue={value}
         className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
-                onChange={e => setValue(e.target.value)}
+        onChange={(e) => setValue(e.target.value)}
         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}
-            </p>
     </li>
-    )
+  );
 }
 
-export default ProgressChange
+export default ProgressChange;

app/component/Tabs.js

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

app/component/ThemeRegistry.js

@@ -1,22 +1,20 @@
 // 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',
+    key: "muirtl",
     stylisPlugins: [prefixer, rtlPlugin],
-    }
+  };
   const [{ cache, flush }] = React.useState(() => {
     const cache = createCache(options);
     cache.compat = true;
@@ -42,14 +40,14 @@ export default function ThemeRegistry({
     if (names.length === 0) {
       return null;
     }
-        let styles = '';
+    let styles = "";
     for (const name of names) {
       styles += cache.inserted[name];
     }
     return (
       <style
         key={cache.key}
-                data-emotion={`${cache.key} ${names.join(' ')}`}
+        data-emotion={`${cache.key} ${names.join(" ")}`}
         dangerouslySetInnerHTML={{
           __html: styles,
         }}

app/component/TimePickerField.js

@@ -1,10 +1,9 @@
 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">
@@ -15,59 +14,71 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
           format="hh:mm"
           className="!w-full"
           shouldDisableTime={(timeValue, clockType) => {
-                        if (clockType === 'hours') {
+            if (clockType === "hours") {
               const { idx, is_morgen } = dataChange;
-                            const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
+              const value =
-                            const hourSelected = value ? +value.split(':')[0] : false
+                data[idx][is_morgen ? "morning_time" : "evening_time"][0];
-
+              const hourSelected = value ? +value.split(":")[0] : false;
-                            const disableMinHour = timeStart || !value ? false :
-                                (hourSelected + 1 > timeValue.$H)
-                            return dataChange.is_morgen ?
-                                !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
-                                !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
 
+              const disableMinHour =
+                timeStart || !value ? false : hourSelected + 1 > timeValue.$H;
+              return dataChange.is_morgen
+                ? !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour)
+                : !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
             }
           }}
-                    views={['hours', 'minutes']}
+          views={["hours", "minutes"]}
           placeholder="انتخاب کنید..."
-                    onChange={e => {
+          onChange={(e) => {
             const hours = e.$H;
             const minute = e.$m;
-                        const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
+            const handleTwoLength = (value) =>
-                        const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
+              String(value).length === 1 ? `0${value}` : value;
+            const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
+              minute
+            )}`;
 
             const newData = data;
             const { idx, is_morgen } = dataChange;
-                        newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
+            newData[idx][is_morgen ? "morning_time" : "evening_time"][
+              timeStart ? 0 : 1
+            ] = newValue;
 
             setValue(newValue);
           }}
           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",
-                            borderRadius: '8px !important'
             },
-                        '.Mui-focused': {
+            "& .MuiInputBase-root": {
-                            '& .MuiOutlinedInput-notchedOutline': {
+              borderRadius: "8px !important",
-                                border: '1px solid #5559CE !important',
+            },
-                                transition: '0.5s all'
+            ".Mui-focused": {
-                            }
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: "1px solid #5559CE !important",
+                transition: "0.5s all",
+              },
+            },
+            "& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
+              {
+                display: "none !important",
               },
-                        '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
-                            display: 'none !important'
-                        }
           }}
         />
-                <p className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+        <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)]"}`}
+        >
+          {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 (
     <TextField
       placeholder={isPlaceHolder && title}
-            label={!isPlaceHolder ? title : ''}
+      label={!isPlaceHolder ? title : ""}
-            type={type || 'text'}
+      type={type || "text"}
       className="!w-full !mx-auto !bg-transparent"
       sx={{
-                '& .MuiFormLabel-root': {
+        "& .MuiFormLabel-root": {
-                    top: '-4px !important'
+          top: "-4px !important",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #EFEFEF !important",
         },
-                '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                '& .MuiInputBase-root': { borderRadius: '6px !important' },
-                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #EFEFEF !important' },
         ".Mui-focused": {
-                    '& .MuiOutlinedInput-notchedOutline': {
+          "& .MuiOutlinedInput-notchedOutline": {
-                        border: '1px solid #5559CE !important',
+            border: "1px solid #5559CE !important",
-                        transition: '0.5s all'
+            transition: "0.5s all",
-                    }
+          },
-                }
+        },
       }}
     />
-    )
+  );
 }
 
 export default Field;

app/component/comment/ItemUser.js

@@ -9,26 +9,36 @@ 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,
+  setUpdate,
+  isReply,
+  list,
+  setList,
+  data,
+  loading,
+}) {
   const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
-        if (nameIsLike === 'is_like' && data.is_dislike) {
+    if (nameIsLike === "is_like" && data.is_dislike) {
       data.is_dislike = false;
       data.dislike--;
-        } else if (nameIsLike === 'is_dislike' && data.is_like) {
+    } else if (nameIsLike === "is_dislike" && data.is_like) {
       data.is_like = false;
       data.like--;
     }
     data[nameLike] = lengthLike;
     data[nameIsLike] = !data[nameIsLike];
     setUpdate(!update);
-    }
+  };
 
   return (
     <li className="w-full">
       <div className="flex items-center justify-start gap-2">
         {loading ? (
-                    <Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" />
+          <Skeleton
+            variant="circular"
+            className="!min-w-[40px] !min-h-[40px]"
+          />
         ) : (
           <Image
             className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
@@ -43,8 +53,12 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
             <Skeleton variant="text" className="!min-w-[70px]" />
           ) : (
             <>
-                            <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
+              <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
-                            <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p>
+                {data.name}
+              </p>
+              <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
+                3 روز پیش
+              </p>
             </>
           )}
         </div>
@@ -56,45 +70,53 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
             <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>
+          <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')
+                handleLike(
+                  data.is_like ? data.like - 1 : data.like + 1,
+                  data,
+                  "like",
+                  "is_like"
+                )
               }
             >
-                            {data.is_like ? (
+              {data.is_like ? <BoldLikeComment /> : <LikeComment />}
-                                <BoldLikeComment />
-                            ) : (
-                                <LikeComment />
-                            )}
             </div>
             {loading ? (
               <Skeleton variant="text" className="!min-w-[8px]" />
             ) : (
-                            <p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p>
+              <p className="text-[#6C757D] text-[12px] font-normal select-none">
+                {data.like}
+              </p>
             )}
           </div>
           <div className="flex items-center justify-start gap-1">
             <div
               className="cursor-pointer"
               onClick={() =>
-                                handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike')
+                handleLike(
+                  data.is_dislike ? data.dislike - 1 : data.dislike + 1,
+                  data,
+                  "dislike",
+                  "is_dislike"
+                )
               }
             >
-                            {data.is_dislike ? (
+              {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
-                                <BoldDisLikeComment />
-                            ) : (
-                                <DisLikeComment />
-                            )}
             </div>
             {loading ? (
               <Skeleton variant="text" className="!min-w-[8px]" />
             ) : (
-                            <p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p>
+              <p className="text-[#6C757D] text-[12px] font-normal select-none">
+                {data.dislike}
+              </p>
             )}
           </div>
           <Button
@@ -104,17 +126,15 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
               setUpdate(!update);
             }}
             variant="text"
-                    >پاسخ</Button>
+          >
+            پاسخ
+          </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'}`}
+          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
         >
-                    <Field
+          <Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
-                        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] 
@@ -133,7 +153,11 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
               }}
             >
               مشاهده پاسخ ها ({data.replays.length})
-                            <div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
+              <div
+                className={`!mr-1 ${
+                  data.is_open_reply ? "!rotate-0" : "!rotate-180"
+                }`}
+              >
                 <ArrowUpComment />
               </div>
             </Button>
@@ -141,8 +165,8 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
         )}
         <ul
           className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
-                    ${loading && 'w-full'}
+                    ${loading && "w-full"}
-                    ${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
+                    ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
         >
           {data.replays.map((item, idx) => (
             <ItemUser
@@ -157,7 +181,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
         </ul>
       </div>
     </li>
-    )
+  );
 }
 
-export default ItemUser
+export default ItemUser;

app/component/comment/index.js

@@ -1,15 +1,20 @@
-'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);
 
   return (
-        <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'}`}>
+    <ul
-            {data && !!data.comments.length && data.comments.map((item, idx) => (
+      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
             key={idx}
             list={list}
@@ -21,7 +26,7 @@ function Comment({ data, loading }) {
           />
         ))}
     </ul>
-    )
+  );
 }
 
 export default Comment;

app/component/date/datePicker/ButtonDate.js

@@ -1,5 +1,5 @@
-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 (
@@ -10,7 +10,7 @@ function ButtonDate({ handleClick, id, text }) {
     >
       {text}
     </ButtonMUI>
-    )
+  );
 }
 
-export default ButtonDate
+export default ButtonDate;

app/component/date/datePicker/Field.js

@@ -1,4 +1,4 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
 
 function Field({ title, handleClick }) {
   return (
@@ -7,18 +7,24 @@ function Field({ title, handleClick }) {
         label={title}
         className="!w-full !mx-auto !bg-[#FFF]"
         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",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiInputBase-root": { borderRadius: "8px !important" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #E9ECEF !important",
+          },
           ".Mui-focused": {
-                        '& .MuiOutlinedInput-notchedOutline': {
+            "& .MuiOutlinedInput-notchedOutline": {
-                            border: '1px solid #0FA1B3 !important',
+              border: "1px solid #0FA1B3 !important",
-                            transition: '0.5s all'
+              transition: "0.5s all",
-                        }
+            },
-                    }
+          },
         }}
       />
       <span
@@ -26,7 +32,7 @@ function Field({ title, handleClick }) {
         onClick={handleClick}
       ></span>
     </div>
-    )
+  );
 }
 
-export default Field
+export default Field;

app/component/date/datePicker/index.js

@@ -1,12 +1,11 @@
-'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 [startDate, setStartDate] = useState(null);
@@ -29,63 +28,63 @@ function DatePicker({ date, updateDate }) {
     }
   };
 
-    const handleDisableDate = e => {
+  const handleDisableDate = (e) => {
     const today = new Date();
-        return today >= e._d
+    return today >= e._d;
-    }
+  };
 
   useEffect(() => {
     if (nextIconDatePicker.current) {
-            nextIconDatePicker.current.click()
+      nextIconDatePicker.current.click();
-            setLoading(false)
+      setLoading(false);
     }
-    }, [nextIconDatePicker])
+  }, [nextIconDatePicker]);
 
   return (
-        <div className='flex items-start justify-evenly w-full'>
+    <div className="flex items-start justify-evenly w-full">
-            <div className='w-1/2 relative flex justify-center'>
+      <div className="w-1/2 relative flex justify-center">
         <DatePickerJalali
           value={startDate}
-                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
+          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
           timePicker={false}
           onChange={handleStartDateChange}
-                    disabledDates={e => handleDisableDate(e)}
+          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'
+            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-1/2 hidden md:flex lg:hidden xl:flex">
-                <div className='w-full relative flex justify-center'>
+        <div className="w-full relative flex justify-center">
           <DatePickerJalali
             value={endDate}
             timePicker={false}
-                        className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
+            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
             nextIcon={
               <Button
-                                className='!min-w-0 !p-0 !rounded-full'
+                className="!min-w-0 !p-0 !rounded-full"
                 ref={nextIconDatePicker}
-                                onClick={e => e.preventDefault()}
+                onClick={(e) => e.preventDefault()}
               >
                 <Image
-                                    src='/assets/icons/arrow-right.svg'
+                  src="/assets/icons/arrow-right.svg"
-                                    className='icon-left-datepicker'
+                  className="icon-left-datepicker"
                   height={24}
                   width={24}
                 />
               </Button>
             }
             onChange={handleEndDateChange}
-                        disabledDates={e => handleDisableDate(e)}
+            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'
+              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
               height={352}
             />
           )}

app/component/date/dateTime/Hours.js

@@ -2,31 +2,31 @@ import { Button } from "@mui/material";
 
 function Hours({ doctor, hour, setHour, value, nameHours }) {
   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
+        <li key={idx}>
-                    key={idx}
-                >
           <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>
+                    `}
+            >
+              {item.hour}
+            </p>
           </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

@@ -8,58 +8,56 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
       disablePortal
       options={list}
       className="!w-full !rounded-lg"
-            onChange={(event) =>
+      onChange={(event) => updateData && updateData(event, name)}
-                updateData &&
-                updateData(event, name)
-            }
       sx={{
         ...styleTextSelectRight,
         // 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]': {
+        "& input[type=number]": {
-                    MozAppearance: 'textfield'
+          MozAppearance: "textfield",
         },
-                '& .MuiInputBase-root': {
+        "& .MuiInputBase-root": {
           borderRadius: 2,
-                    padding: '5px 16px !important'
+          padding: "5px 16px !important",
         },
-                '& .MuiOutlinedInput-notchedOutline': {
+        "& .MuiOutlinedInput-notchedOutline": {
-                    border: '1px solid #D7D7D7'
+          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": {
+          border: isError ? "1px solid red !important" : "",
         },
-                '& .MuiOutlinedInput-notchedOutline': {
-                    border: isError ? '1px solid red !important' : ''
-                }
       }}
-            renderInput={params =>
+      renderInput={(params) => (
         <TextField
           fullWidth
           {...params}
           InputProps={{
             ...params.InputProps,
             endAdornment: (
-                            <div
+              <div className="absolute left-4">
-                                className="absolute left-4"
-                            >
                 <BottomSelect />
               </div>
-                        )
+            ),
           }}
           placeholder={label}
           sx={{
-                        borderRadius: '8px'
+            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 (
     <TextField
       label={title}
       dir="rtl"
-            type={type || 'text'}
+      type={type || "text"}
       className="!w-full !mx-auto !bg-[#FFF]"
       sx={{
         ...styleTextSelectRight,
         // 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]': {
+        "& input[type=number]": {
-                    MozAppearance: 'textfield'
+          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": {
+          border: "1px solid #E9ECEF !important",
+        },
         ".Mui-focused": {
-                    '& .MuiOutlinedInput-notchedOutline': {
+          "& .MuiOutlinedInput-notchedOutline": {
-                        border: '1px solid #0FA1B3 !important',
+            border: "1px solid #0FA1B3 !important",
-                        transition: '0.5s all'
+            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 (
     <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">
+          {title}
+        </p>
+        <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 ? (
-        <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 ? (
     <Skeleton
-            className={width === 'full' ? '!w-full' : ''}
+      className={width === "full" ? "!w-full" : ""}
       height={height}
       variant="rounded"
       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
+    ? Array(line)
+        .fill({})
+        .map((_) => (
           <Skeleton
-            className={`${width === 'full' ? '!w-full' : ''} !my-2`}
+            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 ? (
     <Skeleton
-            className={width === 'full' ? '!w-full' : ''}
+      className={width === "full" ? "!w-full" : ""}
       variant="rounded"
       height={height}
       width={width}
     />
-    ) : children
+  ) : (
+    children
+  );
 }
 
-export default TextLoading
+export default TextLoading;

app/component/openLocation/Content.js

@@ -1,19 +1,21 @@
-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 (
     <>
       <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">
+          باز شدن با
+        </p>
         <div className="cursor-pointer" onClick={handleClose}>
           <CloseModalD />
         </div>
@@ -23,18 +25,20 @@ function Content({ handleClose }) {
         {maps.map((item, idx) => (
           <li className="flex items-center flex-col justify-center gap-1">
             <Image
-                            className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
+              className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
               src={item.src}
               alt="icon app"
               height={40}
               width={40}
             />
-                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
+            <p className="text-[#3B3B3B] font-normal text-[14px]">
+              {item.name}
+            </p>
           </li>
         ))}
       </ul>
     </>
-    )
+  );
 }
 
-export default Content
+export default Content;

app/component/openLocation/index.js

@@ -1,11 +1,10 @@
-'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);
   };
@@ -15,11 +14,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
       {/* Button Modal */}
       {children}
       {/* Content Modal */}
-            <Modal
+      <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
-                open={open}
-                onClose={handleClose}
-                className="!hidden md:!flex"
-            >
         <div
           style={styleDefault}
           className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
@@ -33,20 +28,18 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
         onClose={toggleDrawer(false)}
         className="!flex md:!hidden"
         sx={{
-                    '& .MuiPaper-root': {
+          "& .MuiPaper-root": {
-                        borderRadius: '25px 25px 0px 0px !important',
+            borderRadius: "25px 25px 0px 0px !important",
-                        overflow: 'hidden'
+            overflow: "hidden",
-                    }
+          },
         }}
       >
-                <div
+        <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)]">
-                    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 (
-        <Layout title='تماس با ما' name='contact-us'>
+    <Layout title="تماس با ما" name="contact-us">
       <ContactUsPage />
     </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,13 +1,12 @@
-'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);
@@ -32,7 +31,7 @@ function UserAccount() {
         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='دکتر ها'>
+    <Layout title="دکتر ها">
       <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

@@ -118,7 +118,7 @@ body {
   font-family: iran-sans;
   padding: 0;
   margin: 0;
-    background: #FAFAFA;
+  background: #fafafa;
 }
 
 /* Scroll */
@@ -132,13 +132,13 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    background: #F1F1F1;
+  background: #f1f1f1;
   height: 50px;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #C1C1C1;
+  background: #c1c1c1;
   height: 50px;
   border-radius: 20px;
 }
@@ -155,7 +155,7 @@ 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 {
@@ -200,15 +200,21 @@ html {
 }
 
 .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(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    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;
@@ -221,7 +227,7 @@ html {
 .cover-head-blogs p {
   position: absolute;
   bottom: 32px;
-    color: #FAFAFA;
+  color: #fafafa;
   font-weight: 700;
 }
 
@@ -270,8 +276,8 @@ html {
 .MuiTableContainer-root {
   box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !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,
@@ -394,12 +400,12 @@ html {
 }
 
 .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;
 }
 
@@ -408,7 +414,7 @@ html {
 }
 
 .day-label-bar-inner-rtl div {
-    color: #6C757D !important;
+  color: #6c757d !important;
 }
 
 .panel-jalaali .days-body .not-current {
@@ -416,11 +422,11 @@ html {
 }
 
 .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,
@@ -429,7 +435,7 @@ html {
 }
 
 .panel-jalaali .today {
-    border: 1px solid #FF8848 !important;
+  border: 1px solid #ff8848 !important;
 }
 
 .panel-jalaali .highlight {
@@ -442,12 +448,12 @@ html {
 }
 
 .day.hovered.today {
-    border: 1px solid #F79463;
+  border: 1px solid #f79463;
   border-radius: 50%;
 }
 
 .day-label-bar-inner-rtl {
-    background: #FFF !important;
+  background: #fff !important;
 }
 
 .day-item-outer .day-item-chain .day {
@@ -459,12 +465,11 @@ html {
 }
 
 @media (max-width: 1024px) {
-
   .day-label-bar-inner-rtl,
   .panel-jalaali,
   .panel-header-rtl,
   .days-body {
-        background: #FAFAFA !important;
+    background: #fafafa !important;
   }
 }
 

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);
 
   return (
     <RegisterPage>
-            {isSendMsg ?
+      {isSendMsg ? (
         <SetCodePage
           setIsSendMsg={setIsSendMsg}
-                    link={`/account/${localStorage.getItem('doctor-id')}`}
+          link={`/account/${localStorage.getItem("doctor-id")}`}
-                /> :
+        />
-                <LogInPage setIsSendMsg={setIsSendMsg} />}
+      ) : (
+        <LogInPage setIsSendMsg={setIsSendMsg} />
+      )}
     </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);
 
   return (
     <div>
       <RegisterPage>
-                {isSendMsg ?
+        {isSendMsg ? (
-                    <SetCodePage
+          <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
-                        setIsSendMsg={setIsSendMsg}
+        ) : (
-                        setStep={false}
+          <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />
-                        link='/'
+        )}
-                    /> :
-                    <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,15 +1,14 @@
-'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);
@@ -21,7 +20,6 @@ function LayoutPanel({ children }) {
     }, 2000);
   }, []);
 
-
   return (
     <div className="flex min-h-screen">
       <Sidebar
@@ -31,30 +29,34 @@ function LayoutPanel({ children }) {
         setActive={setActive}
       />
       <BgGray isActive={active} setIsActive={setActive} />
-            <main className={`
+      <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')}
+          disableProfile={pathname.includes("dashboard")}
         />
         <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
           {children}
         </section>
       </main>
-            {pathname.includes('dashboard') && (
+      {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 (
-        <Layout title='تخصص ها' name='specialties'>
+    <Layout title="تخصص ها" name="specialties">
       <SpecialtiesPage />
     </Layout>
-    )
+  );
 }
 
-export default Specialties
+export default Specialties;

app/theme/theme.js

@@ -1,21 +1,21 @@
-'use client';
+"use client";
-import { createTheme } from '@mui/material/styles';
+import { createTheme } from "@mui/material/styles";
 
 const theme = createTheme({
-    direction: 'rtl',
+  direction: "rtl",
   typography: {
-        fontFamily: 'iran-sans',
+    fontFamily: "iran-sans",
   },
   components: {
     MuiButton: {
       styleOverrides: {
         root: {
-                    whiteSpace: 'nowrap',
+          whiteSpace: "nowrap",
-                    minWidth: '0',
+          minWidth: "0",
-                    padding: '9px 18px',
+          padding: "9px 18px",
-                    fontSize: '16px',
+          fontSize: "16px",
-                    fontStyle: 'normal',
+          fontStyle: "normal",
-                    fontWeight: '500',
+          fontWeight: "500",
         },
       },
     },
@@ -32,8 +32,8 @@ const theme = createTheme({
     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 (
-        <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
-                src='/assets/images/logo-2.png'
+        src="/assets/images/logo-2.png"
         height={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">
+        درباره نوبت ۷۲۴
+      </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 (
-        <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 />
         </AnimationTextHead>
       </div>
       <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) => (
-                    <li
+          <li key={idx} className="flex items-start justify-start gap-[8px]">
-                        key={idx}
-                        className='flex items-start justify-start gap-[8px]'
-                    >
             <TickOrangeA />
-                        <p className='text-[#525252] text-[16px] font-medium'>{item}</p>
+            <p className="text-[#525252] text-[16px] font-medium">{item}</p>
           </li>
         ))}
       </ul>
     </div>
-    )
+  );
 }
 
-export default Services
+export default Services;

components/aboutUs/index.js

@@ -15,10 +15,21 @@ function AboutUsPage() {
                     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>
+      >
+        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
+        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
+        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
+        متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
+        درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با
+        نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان
+        خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید
+        داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان
+        رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
+        پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+      </p>
       <Services />
     </div>
-    )
+  );
 }
 
 export default AboutUsPage;

components/blog/detail/Caption.js

@@ -1,12 +1,12 @@
-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 (
     <>
-            <CustomLoading loading={loading} width='full' height={500}>
+      <CustomLoading loading={loading} width="full" height={500}>
         <Image
           className="rounded-[8px] overflow-hidden w-full"
           src={data.cover_first}
@@ -15,15 +15,15 @@ function Caption({ data, loading }) {
           width={808}
         />
       </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
             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 }}
           />
         </MultilineLoading>
       </div>
-            <CustomLoading loading={loading} width='full' height={500}>
+      <CustomLoading loading={loading} width="full" height={500}>
         <Image
           className="rounded-[8px] overflow-hidden w-full"
           src={data.cover_second}
@@ -32,8 +32,8 @@ function Caption({ data, loading }) {
           width={808}
         />
       </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
             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 }}
@@ -41,7 +41,7 @@ function Caption({ data, loading }) {
         </MultilineLoading>
       </div>
     </>
-    )
+  );
 }
 
-export default Caption
+export default Caption;

components/blog/detail/SocialMedia.js

@@ -1,13 +1,9 @@
-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 (
@@ -24,7 +20,7 @@ function SocialMedia({ loading }) {
       ))}
       <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
     </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 (
-        <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">
+        شما هم نظر خود را به اشتراک بگذارید:
+      </p>
       <Button
-                variant='outlined'
+        variant="outlined"
-                className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
+        className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
-                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
+                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
       >
         ثبت نظر
       </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 (
-        <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 />
       </AnimationTextHead>
       <AddComment />
       <Comment data={data} loading={loading} />
     </div>
-    )
+  );
 }
 
-export default CommentUser
+export default CommentUser;

components/blog/detail/index.js

@@ -9,7 +9,7 @@ function Detail({ data, loading }) {
       <SocialMedia loading={loading} />
       <CommentUser data={data} loading={loading} />
     </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 (
     <div>
       <TextLoading width={200} height={18} loading={loading}>
         <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>
+          <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>
         </div>
       </TextLoading>
-            <div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
+      <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>
+          <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>
+          <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>
+            <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>
+          <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>
+            <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,7 +6,6 @@ import Head from "./head";
 import RelatedContent from "./relatedContent";
 
 function BlogPage({ article, articles }) {
-
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -23,7 +22,7 @@ function BlogPage({ article, articles }) {
         <RelatedContent data={articles} loading={loading} />
       </div>
     </div>
-    )
+  );
 }
 
-export default BlogPage
+export default BlogPage;

components/blog/relatedContent/Item.js

@@ -25,22 +25,22 @@ function Item({ data, idx, loading }) {
       <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}>
           <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>
         </TextLoading>
         <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>
       </div>
       {data.id > idx + 1 && (
         <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
       )}
     </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 (
-        <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
-                        src='/assets/images/head-blogs-1.png'
+            src="/assets/images/head-blogs-1.png"
             width={600}
             height={424}
-                        alt='head blog'
+            alt="head blog"
           />
         </CustomLoading>
-                <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+        <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>
+            <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 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 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]'>
+        <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'>
+          <Link href="#" className="w-full cover-head-blogs">
-                        <CustomLoading loading={loading} width='full' height={180}>
+            <CustomLoading loading={loading} width="full" height={180}>
               <Image
-                                src='/assets/images/head-blogs-2.png'
+                src="/assets/images/head-blogs-2.png"
                 width={600}
                 height={424}
-                                alt='head blog'
+                alt="head blog"
               />
             </CustomLoading>
-                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+            <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>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  فواید نوشیدن آب برای سلامتی
+                </p>
               </TextLoading>
             </div>
           </Link>
-                    <Link href='#' className='w-full cover-head-blogs'>
+          <Link href="#" className="w-full cover-head-blogs">
-                        <CustomLoading loading={loading} width='full' height={180}>
+            <CustomLoading loading={loading} width="full" height={180}>
               <Image
-                                src='/assets/images/head-blogs-3.png'
+                src="/assets/images/head-blogs-3.png"
                 width={600}
                 height={424}
-                                alt='head blog'
+                alt="head blog"
               />
             </CustomLoading>
-                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+            <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>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  راهکارهای ساده برای درمان سر درد
+                </p>
               </TextLoading>
             </div>
           </Link>
         </div>
-                <Link href='#' className='w-full cover-head-blogs'>
+        <Link href="#" className="w-full cover-head-blogs">
-                    <CustomLoading loading={loading} width='full' height={180}>
+          <CustomLoading loading={loading} width="full" height={180}>
             <Image
-                            src='/assets/images/head-blogs-4.png'
+              src="/assets/images/head-blogs-4.png"
               width={600}
               height={424}
-                            alt='head blog'
+              alt="head blog"
             />
           </CustomLoading>
-                    <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+          <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>
+              <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,7 +7,6 @@ import Title from "./title";
 import LatestArticles from "./latestArticles";
 
 function BlogsPage() {
-
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -22,7 +21,7 @@ function BlogsPage() {
       <Head loading={loading} />
       <LatestArticles loading={loading} />
     </div>
-    )
+  );
 }
 
-export default BlogsPage
+export default BlogsPage;

components/blogs/latestArticles/Article.js

@@ -1,15 +1,15 @@
-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 (
-        <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}`}>
           <Image
-                        className='w-full'
+            className="w-full"
             alt="article-img"
             src={data.src}
             height={217}
@@ -17,25 +17,31 @@ function Article({ data, loading }) {
           />
         </Link>
       </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}>
             <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">
+                {data.title}
+              </p>
             </Link>
           </TextLoading>
         </div>
-                <div className='flex items-center justify-start gap-[35px]'>
+        <div className="flex items-center justify-start gap-[35px]">
           <TextLoading width={100} height={18} loading={loading}>
-                        <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
+            <p className="text-[#9B9B9B] text-[14px] font-medium">
+              تاریخ انتشار: {data.date_of_release}
+            </p>
           </TextLoading>
           <TextLoading width={110} height={18} loading={loading}>
-                        <p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
+            <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 (
     <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]">
+        جدیدترین مقاله ها
+      </p>
       <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 => (
+        {articles.map((item) => (
-                    <Article
+          <Article data={item} key={item.id} loading={loading} />
-                        data={item}
-                        key={item.id}
-                        loading={loading}
-                    />
         ))}
       </ul>
-            <div className='mt-[56px] flex justify-center'>
+      <div className="mt-[56px] flex justify-center">
         <Pagination />
       </div>
     </div>
-    )
+  );
 }
 
-export default LatestArticles
+export default LatestArticles;

components/blogs/title/ItemTitle.js

@@ -1,13 +1,16 @@
-import { Button } from "@mui/material"
+import { Button } from "@mui/material";
 
 function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
-
   return (
     <li>
       <Button
         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)}
         variant="contained"
@@ -16,7 +19,7 @@ function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
         {name}
       </Button>
     </li>
-    )
+  );
 }
 
-export default ItemTitle
+export default ItemTitle;

components/blogs/title/index.js

@@ -1,11 +1,10 @@
-'use client';
+"use client";
 import { useState } from "react";
 import ItemTitle from "./ItemTitle";
 
-const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
+const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
 
 function Title() {
-
   const [activeBtn, setActiveBtn] = useState(0);
 
   return (
@@ -20,7 +19,7 @@ function Title() {
         />
       ))}
     </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: 10 },
-        { label: 'درمانگاه ابوعلی', id: 20 },
+    { label: "درمانگاه ابوعلی", id: 20 },
-        { label: 'درمانگاه مرکزی', id: 30 }
+    { label: "درمانگاه مرکزی", id: 30 },
   ];
 
-    const updateData = event => setLocateVisit(event.target.innerText);
+  const updateData = (event) => setLocateVisit(event.target.innerText);
 
   return (
     <div className="flex flex-col items-start gap-[19px] justify-start">
-            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
+      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
+        1. انتخاب محل ویزیت
+      </p>
       <AutoCompleteSelect
         isError={isError && !locateVisit}
         updateData={updateData}
-                label='درمانگاه'
+        label="درمانگاه"
         list={clinics}
       />
     </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 (
     <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">
+        2. انتخاب روز
+      </p>
       <SelectDatePicker />
       {!isStep && (
         <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,9 +1,11 @@
-import DateTime from "@/app/component/date/dateTime"
+import DateTime from "@/app/component/date/dateTime";
 
 function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
   return (
     <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">
+        3. انتخاب ساعت
+      </p>
       <DateTime
         doctor={doctor}
         setStep={setStep}
@@ -14,7 +16,7 @@ function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
         <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,14 +4,15 @@ import Time from "./Time";
 import PlaceVisit from "./PlaceVisit";
 
 function Date({ doctor, setStep }) {
-
   const [locateVisit, setLocateVisit] = useState();
   const [isError, setIsError] = useState(false);
 
   return (
     <div className="w-full lg:w-[61%]">
-            <div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
+      <div
-            bg-transparent lg:bg-[#FFF]">
+        className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
+            bg-transparent lg:bg-[#FFF]"
+      >
         <PlaceVisit
           setLocateVisit={setLocateVisit}
           locateVisit={locateVisit}
@@ -31,7 +32,7 @@ function Date({ doctor, setStep }) {
         />
       </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 (
-        <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 title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
+        <EditField changeData={changeData} data={data?.phone} name="phone" />
       </Content>
-            <Content title='کد ملی'>
+      <Content title="کد ملی">
-                <EditField changeData={changeData} data={data?.codemeli} name='codemeli' />
+        <EditField
+          changeData={changeData}
+          data={data?.codemeli}
+          name="codemeli"
+        />
       </Content>
-            <Content title='نام و نام خانوادگی'>
+      <Content title="نام و نام خانوادگی">
-                <EditField changeData={changeData} data={data?.name} name='name' />
+        <EditField changeData={changeData} data={data?.name} name="name" />
       </Content>
-            <Content title='نوع بیمه'>
+      <Content title="نوع بیمه">
         <AutoCompleteSelect
           updateData={updateSelect}
-                    label='نوع بیمه'
+          label="نوع بیمه"
-                    name='first'
+          name="first"
           list={bime}
         />
       </Content>
     </div>
-    )
+  );
 }
 
-export default Form
+export default Form;

components/booking/detail/index.js

@@ -5,11 +5,18 @@ 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: '',
+    first: "",
-        second: ''
+    second: "",
   });
 
   const changeData = (value, type, name) =>
@@ -17,11 +24,12 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
       ...data,
       [name]: {
         ...data[name],
-                [type]: value
+        [type]: value,
-            }
+      },
     });
 
-    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+  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]' : ''}
@@ -32,7 +40,7 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
             `}
       >
         <p className="text-[#3B3B3B] text-[20px] font-bold">
-                    {isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
+          {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
         </p>
         <Form
           isForAnother={isForAnother}
@@ -44,16 +52,18 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
           <Button
             className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
             onClick={() => {
-                            setIsForAnother(true)
+              setIsForAnother(true);
               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 />
-                        <p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
+            <p className="text-[#5559CE] text-[16px] font-medium">
+              دریافت نوبت برای فرد دیگر{" "}
+            </p>
           </Button>
         )}
         <ButtonFixed>
@@ -61,17 +71,23 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
             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]'}`}
+                    ${
+                      isForAnother
+                        ? "!mt-0 md:!mt-[40px]"
+                        : "!mt-0 md:!mt-[32px]"
+                    }`}
             variant="contained"
-                        onClick={() => setStep(prev => prev + 1)}
+            onClick={() => setStep((prev) => prev + 1)}
           >
-                        <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
+            <p className="text-[#EFEFEF] text-[16px] font-medium">
+              ثبت اطلاعات
+            </p>
             <ArrowLeftB />
           </Button>
         </ButtonFixed>
       </div>
     </div>
-    )
+  );
 }
 
-export default Detail
+export default Detail;

components/booking/failedPay/index.js

@@ -6,7 +6,7 @@ import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
 
 function FailedPay({ setStep, fadeElement }) {
   return (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
       <div
         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]`}
@@ -14,31 +14,37 @@ function FailedPay({ setStep, fadeElement }) {
         <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>
+            <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='/'>
+            <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>
+                <p className="text-[#5559CE] text-[16px] font-medium">
+                  صفحه اصلی
+                </p>
               </Button>
             </Link>
             <Button
               variant="contained"
-                            onClick={() => setStep(prev => prev - 2)}
+              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>
+              <p className="text-[#FAFAFA] text-[16px] font-medium">
+                تلاش دوباره
+              </p>
             </Button>
           </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({
+  doctor,
+  step,
+  setStep,
+  children,
+  isFirst,
+  disableSide,
+}) {
   return (
     <div
       className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
-            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)]">
+            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} />
+        <Information
+          disableSide={disableSide}
+          doctor={doctor}
+          step={step}
+          setStep={setStep}
+        />
       )}
       {children}
     </div>
-    )
+  );
 }
 
-export default BookingPage
+export default BookingPage;

components/booking/information/Detail.js

@@ -1,9 +1,9 @@
-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 (
@@ -13,7 +13,9 @@ function Detail({ doctor, step, setStep }) {
           <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
             <LocationA />
           </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">
+            آدرس: {doctor.location}
+          </p>
         </li>
         <li className="flex items-center justify-between w-full">
           <div className="flex items-center justify-start gap-[4px]">
@@ -21,8 +23,12 @@ function Detail({ doctor, step, setStep }) {
               <CalendarA />
             </div>
             <div className="flex items-center justify-start">
-                            <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-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
+                تاریخ نوبت:{" "}
+              </p>
+              <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
+                13 خرداد 1403
+              </p>
             </div>
           </div>
           {step < 5 && (
@@ -31,7 +37,9 @@ function Detail({ doctor, step, setStep }) {
               onClick={() => setStep(0)}
               variant="text"
             >
-                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+              <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>
@@ -44,8 +52,12 @@ function Detail({ doctor, step, setStep }) {
               <ClockA />
             </div>
             <div className="flex items-center justify-start">
-                            <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-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
+                زمان نوبت:{" "}
+              </p>
+              <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
+                ساعت 17:20
+              </p>
             </div>
           </div>
           {step < 5 && (
@@ -54,7 +66,9 @@ function Detail({ doctor, step, setStep }) {
               onClick={() => setStep(0)}
               variant="text"
             >
-                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+              <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>
@@ -75,7 +89,10 @@ function Detail({ doctor, step, setStep }) {
           >
             <TickCircleOrange />
           </div>
-                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+          <p className="text-[#616161] text-[16px] font-normal">
+            فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
+            ممکن می باشد.
+          </p>
         </li>
         <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
           <div
@@ -84,11 +101,13 @@ function Detail({ doctor, step, setStep }) {
           >
             <TickCircleOrange />
           </div>
-                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+          <p className="text-[#616161] text-[16px] font-normal">
+            لطفا به موقع در مطب حضور داشته باشید.
+          </p>
         </li>
       </ul>
     </div>
-    )
+  );
 }
 
-export default Detail
+export default Detail;

components/booking/information/Head.js

@@ -1,13 +1,15 @@
-import Image from "next/image"
+import Image from "next/image";
 
 function Head({ doctor }) {
   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="
                     w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
@@ -19,11 +21,15 @@ function Head({ doctor }) {
         width={95}
       />
       <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}
+        </p>
+        <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,14 +1,22 @@
-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 (
-        <div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
+    <div
+      className={`w-full lg:w-[41%] relative ${
+        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>
@@ -16,7 +24,7 @@ function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
         <Detail doctor={doctor} step={step} setStep={setStep} />
       </div>
     </div>
-    )
+  );
 }
 
-export default Information
+export default Information;

components/booking/location/Address.js

@@ -1,21 +1,19 @@
 function Address({ doctor }) {
   return (
-        <ul className='hidden mt-[4px] lg:flex flex-col'>
+    <ul className="hidden mt-[4px] lg:flex flex-col">
       {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>
-                        <p className='font-normal'>{item.location}</p>
           </div>
           {doctor.address.length > idx + 1 && (
-                        <span className='bg-[#EFEFEF] block h-px w-full'></span>
+            <span className="bg-[#EFEFEF] block h-px w-full"></span>
           )}
         </li>
       ))}
     </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 (
     <div className="flex items-center justify-start gap-[12px]">
       <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}
         alt="profile"
         height={56}
         width={56}
       />
       <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}
+        </p>
+        <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

@@ -13,7 +13,7 @@ function Location({ doctor }) {
         <Address doctor={doctor} />
       </div>
     </div>
-    )
+  );
 }
 
-export default Location
+export default Location;

components/booking/paying/ButtonFixed.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 function ButtonFixed({ children }) {
   return (
@@ -9,7 +9,7 @@ function ButtonFixed({ children }) {
     >
       {children}
     </div>
-    )
+  );
 }
 
-export default ButtonFixed
+export default ButtonFixed;

components/booking/paying/index.js

@@ -1,10 +1,10 @@
-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 (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
       <div
         className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
                 rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
@@ -12,27 +12,35 @@ function Paying({ setTypePay, fadeElement, setStep }) {
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
           اطلاعات پرداخت
         </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>
+            مبلغ پیش پرداخت (بیعانه) :{" "}
+          </p>
+          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+            20،000 تومان
+          </p>
         </div>
-                <span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
+        <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'>
+          <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>
+            <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]'
+              className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
-                            onClick={() => setStep(prev => prev + 1)}
+              onClick={() => setStep((prev) => prev + 1)}
               variant="contained"
             >
-                            <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
+              <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,11 +1,11 @@
-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 (
-        <div className='w-full lg:w-[59%]'>
+    <div className="w-full lg:w-[59%]">
       <div
         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]`}
@@ -13,34 +13,44 @@ function SuccessPay({ setStep }) {
         <div className="pt-[8px] pb-[4px] grid place-items-center">
           <div className="flex flex-col justify-center items-center gap-[14px]">
             <TickCircleGreenA />
-                        <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
+            <p className="text-[#3B3B3B] text-[20px] font-bold">
+              پرداخت شما با موفقیت انجام شد.
+            </p>
           </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>
+          >
+            برای نمایش نوبت ها به قسمت نوبت های من بروید.{" "}
+          </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>
             <div className="flex items-center justify-between my-[20px] gap-[80px]">
-                            <p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
+              <p className="text-[#616161] text-[14px] font-medium">
-                            <p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
+                مقدار پرداخت شده:{" "}
+              </p>
+              <p className="text-[#05BA58] text-[14px] font-bold">
+                20،000 تومان
+              </p>
             </div>
             <span className="w-full block h-px bg-[#EFEFEF]"></span>
           </div>
-                    <Link href='/dashboard'>
+          <Link href="/dashboard">
             <Button
               variant="text"
               className="!flex !items-center !justify-center !gap-[4px]"
             >
-                            <p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
+              <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 (
-        <div className='my-[24px]'>
+    <div className="my-[24px]">
       <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>
-            <div className='mt-[16px]'>
+      <div className="mt-[16px]">{children}</div>
-                {children}
     </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 (
-        <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) => (
         <CustomLoading width={156} height={110} loading={loading}>
           <li
             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'
-                        />
-                        <p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
           </li>
         </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
-          key={idx}
-          className='flex items-start justify-start gap-2'
     >
-          <div className='min-w-[24px] min-h-[24px]'>
+      {data.specialties.map((item, idx) => (
+        <li key={idx} 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 (
-        <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
-                    key={idx}
-                    className='flex items-start justify-start gap-2'
     >
-                    <div className='min-w-[24px] min-h-[24px]'>
+      {data.specialties.map((item, idx) => (
+        <li key={idx} 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 Specialties
+export default Specialties;

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

@@ -1,16 +1,17 @@
-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 (
     <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'>
+    >
+      <div className="w-full">
         <CustomLoading loading={loading} width={600} height={400}>
           <Image
             className="rounded-[8px] overflow-hidden"
@@ -24,7 +25,7 @@ function Images({ data, loading }) {
       <List data={data} loading={loading} />
       <Slider data={data} loading={loading} />
     </div>
-    )
+  );
 }
 
-export default Images
+export default Images;

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

@@ -1,11 +1,11 @@
-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 (
     <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
             className="rounded-[8px] overflow-hidden"
             src={data.images_clinic[1]}
@@ -15,8 +15,8 @@ function List({ data, loading }) {
           />
         </CustomLoading>
       </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={data.images_clinic[2]}
@@ -26,8 +26,8 @@ function List({ data, loading }) {
           />
         </CustomLoading>
       </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={data.images_clinic[3]}
@@ -37,8 +37,8 @@ function List({ data, loading }) {
           />
         </CustomLoading>
       </div>
-            <div className='w-full'>
+      <div className="w-full">
-                <CustomLoading loading={loading} width='full' height={190}>
+        <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={data.images_clinic[4]}
@@ -49,7 +49,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
     </div>
-    )
+  );
 }
 
-export default List
+export default List;

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

@@ -1,5 +1,5 @@
-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 (
@@ -16,9 +16,10 @@ function Slider({ data, loading }) {
               className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
             />
           </CustomLoading>
-                ) : undefined)}
+        ) : undefined
+      )}
     </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);
 
   return (
     <div className="opacity-page transition-all duration-500">
       <Images data={data} loading={loading} />
-            <ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
+      <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
         <div className="flex flex-col items-center justify-center">
-                    <MultilineLoading line={10} loading={loading} width='full' height={18}>
+          <MultilineLoading
+            line={10}
+            loading={loading}
+            width="full"
+            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 }}
             ></p>
           </MultilineLoading>
           <Button
-                        className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
+            className={`${
+              loading && "!hidden"
+            } !text-[#F17732] !text-[14px] !font-light !p-2`}
             onClick={() => setIsMore(!isMore)}
             variant="text"
           >
-                        {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
           </Button>
         </div>
       </ContentDetail>
-            <ContentDetail head='بیمه های طرف قرارداد'>
+      <ContentDetail head="بیمه های طرف قرارداد">
         <ListBime loading={loading} data={data} />
       </ContentDetail>
-            <ContentDetail head='تخصص ها'>
+      <ContentDetail head="تخصص ها">
         <Specialties loading={loading} data={data} />
       </ContentDetail>
-            <ContentDetail head='خدمات'>
+      <ContentDetail head="خدمات">
         <Services loading={loading} data={data} />
       </ContentDetail>
     </div>
-    )
+  );
 }
 
-export default About
+export default About;