add prettier formatter to all file

2024-09-25 11:03:44 +03:30
parent fa38ee2b21
commit eda896e917
410 changed files with 47636 additions and 43842 deletions
@@ -1,17 +1,15 @@
-import TextLoading from '@/app/component/loading/Text'
-import React from 'react'
+import TextLoading from "@/app/component/loading/Text";
+import React from "react";

 function ContentDetail({ head, children, loading }) {
-    return (
-        <div className='my-[24px]'>
-            <TextLoading width={200} height={20} loading={loading}>
-                <p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
-            </TextLoading>
-            <div className='mt-[16px]'>
-                {children}
-            </div>
-        </div>
-    )
+  return (
+    <div className="my-[24px]">
+      <TextLoading width={200} height={20} loading={loading}>
+        <p className="text-[#3B3B3B] text-[20px] font-bold">{head}</p>
+      </TextLoading>
+      <div className="mt-[16px]">{children}</div>
+    </div>
+  );
 }

-export default ContentDetail
+export default ContentDetail;
@@ -1,27 +1,24 @@
-import CustomLoading from '@/app/component/loading/Custom'
-import Image from 'next/image'
+import CustomLoading from "@/app/component/loading/Custom";
+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]'>
-            {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]'
-                    >
-                        <Image
-                            src={item.img}
-                            height={92}
-                            width={92}
-                            alt='bime'
-                        />
-                        <p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
-                    </li>
-                </CustomLoading>
-            ))}
-        </ul>
-    )
+  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]">
+      {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]"
+          >
+            <Image src={item.img} height={92} width={92} alt="bime" />
+            <p className="text-[#525252] text-[16px] font-medium">
+              {item.name}
+            </p>
+          </li>
+        </CustomLoading>
+      ))}
+    </ul>
+  );
 }

-export default ListBime
+export default ListBime;
@@ -1,32 +1,33 @@
-import TextLoading from '@/app/component/loading/Text';
-import TickCircleOrange from '@/components/icons/TickCircleOrange';
+import TextLoading from "@/app/component/loading/Text";
+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]'>
+        <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;
@@ -1,32 +1,33 @@
-import TextLoading from '@/app/component/loading/Text';
-import TickCircleOrange from '@/components/icons/TickCircleOrange';
+import TextLoading from "@/app/component/loading/Text";
+import TickCircleOrange from "@/components/icons/TickCircleOrange";

 function Specialties({ data, loading }) {
-    return (
-        <ul className='
+  return (
+    <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]'>
-            {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={`
+        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]">
+            <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>
-                    </TextLoading>
-                </li>
-            ))}
-        </ul>
-    )
+            >
+              {item}
+            </p>
+          </TextLoading>
+        </li>
+      ))}
+    </ul>
+  );
 }

-export default Specialties
+export default Specialties;
@@ -1,30 +1,31 @@
-import List from './List';
-import Slider from './Slider';
-import Image from 'next/image';
-import CustomLoading from '@/app/component/loading/Custom';
+import List from "./List";
+import Slider from "./Slider";
+import Image from "next/image";
+import CustomLoading from "@/app/component/loading/Custom";

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

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

-export default List
+export default List;
@@ -1,24 +1,25 @@
-import CustomLoading from "@/app/component/loading/Custom"
-import Image from "next/image"
+import CustomLoading from "@/app/component/loading/Custom";
+import Image from "next/image";

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

-export default Slider
+export default Slider;
@@ -9,48 +9,55 @@ import ContentDetail from "./ContentDetail";
 import MultilineLoading from "@/app/component/loading/Multiline";

 function About({ data, loading }) {
+  const [isMore, setIsMore] = useState(false);

-    const [isMore, setIsMore] = useState(false);
-
-    return (
-        <div className="opacity-page transition-all duration-500">
-            <Images data={data} loading={loading} />
-            <ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
-                <div className="flex flex-col items-center justify-center">
-                    <MultilineLoading line={10} loading={loading} width='full' height={18}>
-                        <p
-                            className={`
+  return (
+    <div className="opacity-page transition-all duration-500">
+      <Images data={data} loading={loading} />
+      <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
+        <div className="flex flex-col items-center justify-center">
+          <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' :
-                                    'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
-                                }
+                        ${
+                          isMore
+                            ? "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`}
-                        onClick={() => setIsMore(!isMore)}
-                        variant="text"
-                    >
-                        {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
-                    </Button>
-                </div>
-            </ContentDetail>
-            <ContentDetail head='بیمه های طرف قرارداد'>
-                <ListBime loading={loading} data={data} />
-            </ContentDetail>
-            <ContentDetail head='تخصص ها'>
-                <Specialties loading={loading} data={data} />
-            </ContentDetail>
-            <ContentDetail head='خدمات'>
-                <Services loading={loading} data={data} />
-            </ContentDetail>
+              dangerouslySetInnerHTML={{ __html: data.caption }}
+            ></p>
+          </MultilineLoading>
+          <Button
+            className={`${
+              loading && "!hidden"
+            } !text-[#F17732] !text-[14px] !font-light !p-2`}
+            onClick={() => setIsMore(!isMore)}
+            variant="text"
+          >
+            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
+          </Button>
        </div>
-    )
+      </ContentDetail>
+      <ContentDetail head="بیمه های طرف قرارداد">
+        <ListBime loading={loading} data={data} />
+      </ContentDetail>
+      <ContentDetail head="تخصص ها">
+        <Specialties loading={loading} data={data} />
+      </ContentDetail>
+      <ContentDetail head="خدمات">
+        <Services loading={loading} data={data} />
+      </ContentDetail>
+    </div>
+  );
 }

-export default About
+export default About;
@@ -1,16 +1,18 @@
 import TextLoading from "@/app/component/loading/Text";

 function ContentDetail({ head, detail, loading }) {
-    return (
-        <li className="flex flex-col items-start justify-center gap-4">
-            <TextLoading width={100} height={18} loading={loading}>
-                <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
-            </TextLoading>
-            <TextLoading width={160} height={18} loading={loading}>
-                <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
-            </TextLoading>
-        </li>
-    )
+  return (
+    <li className="flex flex-col items-start justify-center gap-4">
+      <TextLoading width={100} height={18} loading={loading}>
+        <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+          {head}
+        </p>
+      </TextLoading>
+      <TextLoading width={160} height={18} loading={loading}>
+        <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
+      </TextLoading>
+    </li>
+  );
 }

-export default ContentDetail;
+export default ContentDetail;
@@ -1,30 +1,22 @@
-import ContentDetail from "./ContentDetail"
+import ContentDetail from "./ContentDetail";

 function Detail({ data, loading }) {
-    return (
-        <ul className="flex flex-col items-start justify-start gap-[16px]">
-            <ContentDetail
-                head='روزهای کاری: '
-                loading={loading}
-                detail={`ساعت کاری: ${data.hours_of_work}`}
-            />
-            <ContentDetail
-                head='تلفن: '
-                loading={loading}
-                detail={`${data.phone_number_1} ${data.phone_number_2}`}
-            />
-            <ContentDetail
-                head='ایمیل:'
-                loading={loading}
-                detail={data.email}
-            />
-            <ContentDetail
-                head='آدرس: '
-                loading={loading}
-                detail={data.location}
-            />
-        </ul>
-    )
+  return (
+    <ul className="flex flex-col items-start justify-start gap-[16px]">
+      <ContentDetail
+        head="روزهای کاری: "
+        loading={loading}
+        detail={`ساعت کاری: ${data.hours_of_work}`}
+      />
+      <ContentDetail
+        head="تلفن: "
+        loading={loading}
+        detail={`${data.phone_number_1} ${data.phone_number_2}`}
+      />
+      <ContentDetail head="ایمیل:" loading={loading} detail={data.email} />
+      <ContentDetail head="آدرس: " loading={loading} detail={data.location} />
+    </ul>
+  );
 }

-export default Detail
+export default Detail;
@@ -8,61 +8,58 @@ import ModalOpenLocation from "@/app/component/openLocation";
 import CustomLoading from "@/app/component/loading/Custom";

 function Contact({ data, loading }) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);

-    const [open, setOpen] = useState(false);
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-
-    return (
-        <div
-            className="
+  return (
+    <div
+      className="
                opacity-page border border-[#EFEFEF] rounded-[16px]
                py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] 
                px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
            "
+    >
+      <div className="flex items-end justify-between">
+        <Detail data={data} loading={loading} />
+        <ModalOpenLocation
+          open={open}
+          setOpen={setOpen}
+          handleClose={handleClose}
        >
-            <div className="flex items-end justify-between">
-                <Detail data={data} loading={loading} />
-                <ModalOpenLocation
-                    open={open}
-                    setOpen={setOpen}
-                    handleClose={handleClose}
-                >
-                    <Button
-                        className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
-                        onClick={handleOpen}
-                        variant="outlined"
-                    >
-                        <RoutingC />
-                        مسیریابی
-                    </Button>
-                </ModalOpenLocation>
-            </div>
-            <div
-                className="w-full relative h-[460px] mt-[24px]"
+          <Button
+            className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
+            onClick={handleOpen}
+            variant="outlined"
+          >
+            <RoutingC />
+            مسیریابی
+          </Button>
+        </ModalOpenLocation>
+      </div>
+      <div className="w-full relative h-[460px] mt-[24px]">
+        <CustomLoading width="full" height={400} loading={loading}>
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
+            className="w-full h-full rounded-lg"
+            loading="lazy"
+          ></iframe>
+          <ModalOpenLocation
+            open={open}
+            setOpen={setOpen}
+            handleClose={handleClose}
+          >
+            <Button
+              className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
+              onClick={handleOpen}
            >
-                <CustomLoading width='full' height={400} loading={loading}>
-                    <iframe
-                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
-                        className='w-full h-full rounded-lg'
-                        loading="lazy"
-                    ></iframe>
-                    <ModalOpenLocation
-                        open={open}
-                        setOpen={setOpen}
-                        handleClose={handleClose}
-                    >
-                        <Button
-                            className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
-                            onClick={handleOpen}
-                        >
-                            <RoutingWhiteC />
-                        </Button>
-                    </ModalOpenLocation>
-                </CustomLoading>
-            </div>
-        </div>
-    )
+              <RoutingWhiteC />
+            </Button>
+          </ModalOpenLocation>
+        </CustomLoading>
+      </div>
+    </div>
+  );
 }

-export default Contact
+export default Contact;
@@ -1,40 +1,44 @@
-import CloseModalD from '@/components/icons/CloseModalD'
-import Image from 'next/image'
+import CloseModalD from "@/components/icons/CloseModalD";
+import Image from "next/image";

 const maps = [
-    { src: '/assets/images/snapp.png', name: 'snapp' },
-    { src: '/assets/images/tapsi.png', name: 'tapsi' },
-    { src: '/assets/images/maps.png', name: 'maps' },
-    { src: '/assets/images/balad.png', name: 'balad' },
-    { src: '/assets/images/waze.png', name: 'waze' }
-]
+  { src: "/assets/images/snapp.png", name: "snapp" },
+  { src: "/assets/images/tapsi.png", name: "tapsi" },
+  { src: "/assets/images/maps.png", name: "maps" },
+  { src: "/assets/images/balad.png", name: "balad" },
+  { 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>
-                <div className="cursor-pointer" onClick={handleClose}>
-                    <CloseModalD />
-                </div>
-            </div>
-            <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
-            <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
-                {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]'
-                            src={item.src}
-                            alt="icon app"
-                            height={40}
-                            width={40}
-                        />
-                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
-                    </li>
-                ))}
-            </ul>
-        </>
-    )
+  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>
+        <div className="cursor-pointer" onClick={handleClose}>
+          <CloseModalD />
+        </div>
+      </div>
+      <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
+      <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
+        {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]"
+              src={item.src}
+              alt="icon app"
+              height={40}
+              width={40}
+            />
+            <p className="text-[#3B3B3B] font-normal text-[14px]">
+              {item.name}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
 }

-export default Content
+export default Content;
@@ -1,51 +1,44 @@
-'use client';
+"use client";

 import { Drawer, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import Content from "./Content";

 function ModalOpenLocation({ open, setOpen, handleClose, children }) {
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };

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

-export default ModalOpenLocation
+export default ModalOpenLocation;
@@ -1,23 +1,19 @@
-import ItemDoctor from '@/app/component/ItemDoctor';
-import Pagination from '@/app/component/Pagination';
+import ItemDoctor from "@/app/component/ItemDoctor";
+import Pagination from "@/app/component/Pagination";

 function List({ doctors, loading }) {
-    return (
-        <>
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
-                {doctors.map(doctor => (
-                    <ItemDoctor
-                        key={doctor.id}
-                        doctor={doctor}
-                        loading={loading}
-                    />
-                ))}
-            </ul>
-            <div className='mt-[56px] flex justify-center'>
-                <Pagination />
-            </div>
-        </>
-    )
+  return (
+    <>
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
+        {doctors.map((doctor) => (
+          <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+        ))}
+      </ul>
+      <div className="mt-[56px] flex justify-center">
+        <Pagination />
+      </div>
+    </>
+  );
 }

-export default List
+export default List;
@@ -1,13 +1,11 @@
-import SmSearch from '@/components/searchHead/SmSearch';
+import SmSearch from "@/components/searchHead/SmSearch";

 function SearchBar() {
-    return (
-        <div className="flex justify-center">
-            <SmSearch
-                placeholder='جستجوی پزشک یا تخصص'
-            />
-        </div>
-    )
+  return (
+    <div className="flex justify-center">
+      <SmSearch placeholder="جستجوی پزشک یا تخصص" />
+    </div>
+  );
 }

-export default SearchBar
+export default SearchBar;
@@ -1,13 +1,13 @@
-import List from "./List"
-import SearchBar from "./SearchBar"
+import List from "./List";
+import SearchBar from "./SearchBar";

 function Doctors({ doctors, loading }) {
-    return (
-        <div className="opacity-page">
-            <SearchBar />
-            <List loading={loading} doctors={doctors} />
-        </div>
-    )
+  return (
+    <div className="opacity-page">
+      <SearchBar />
+      <List loading={loading} doctors={doctors} />
+    </div>
+  );
 }

-export default Doctors
+export default Doctors;
@@ -1,16 +1,15 @@
-'use client';
+"use client";

-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";

-import About from './components/about';
-import Contact from './components/contact';
-import Doctors from './components/doctors';
-import Tabs from '@/app/component/Tabs';
+import About from "./components/about";
+import Contact from "./components/contact";
+import Doctors from "./components/doctors";
+import Tabs from "@/app/component/Tabs";

-const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
+const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];

 function ClinicPage({ data, doctors }) {
-
  const [value, setValue] = useState(0);
  const [loading, setLoading] = useState(true);
  const handleChange = (event, newValue) => setValue(newValue);
@@ -18,7 +17,7 @@ function ClinicPage({ data, doctors }) {
  const Components = [
    <About data={data} loading={loading} />,
    <Contact data={data} loading={loading} />,
-    <Doctors doctors={doctors} loading={loading} />
+    <Doctors doctors={doctors} loading={loading} />,
  ];

  useEffect(() => {
@@ -31,27 +30,27 @@ function ClinicPage({ data, doctors }) {
    <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
      <Tabs
        style={{
-          '.MuiTabs-indicator': {
-            height: '2px',
-            borderRadius: '10px',
-            background: '#F17732'
+          ".MuiTabs-indicator": {
+            height: "2px",
+            borderRadius: "10px",
+            background: "#F17732",
          },
-          '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
-            color: '#F17732 !important'
+          "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
+            color: "#F17732 !important",
+          },
+          "& .MuiButtonBase-root.Mui-selected": {
+            color: "#F17732 !important",
          },
-          '& .MuiButtonBase-root.Mui-selected': {
-            color: '#F17732 !important'
-          }
        }}
        value={value}
        listTab={listTab}
        handleChange={handleChange}
      />
-      <div className='mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]'>
+      <div className="mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]">
        {Components[value]}
      </div>
    </div>
-  )
+  );
 }

-export default ClinicPage
+export default ClinicPage;