add prettier formatter to all file

components/clinics/head/SearchBar.js

@@ -1,43 +1,43 @@
-import { Button, ButtonGroup, TextField } from '@mui/material';
-import SearchD from '@/components/icons/SearchD';
-import ModalSearchCity from './modal';
+import { Button, ButtonGroup, TextField } from "@mui/material";
+import SearchD from "@/components/icons/SearchD";
+import ModalSearchCity from "./modal";
 
 function SearchBar() {
-    return (
-        <ButtonGroup
-            variant="contained"
-            className="
+  return (
+    <ButtonGroup
+      variant="contained"
+      className="
             !bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center 
             !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             !h-fit !pl-1"
-        >
-            <ModalSearchCity />
-            <TextField
-                variant="standard"
-                InputProps={{
-                    disableUnderline: true
-                }}
-                sx={{
-                    background: 'transparent !important',
-                    '& .MuiInputBase-input': { color: '#7E7E7E' },
-                    '& .MuiInput-root': { borderBottom: 'none' },
-                    '& .MuiInputBase-root': { height: '100%' }
-                }}
-                placeholder="جستجوی تخصص"
-                dir='rtl'
-                className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-            />
-            <Button
-                className="
+    >
+      <ModalSearchCity />
+      <TextField
+        variant="standard"
+        InputProps={{
+          disableUnderline: true,
+        }}
+        sx={{
+          background: "transparent !important",
+          "& .MuiInputBase-input": { color: "#7E7E7E" },
+          "& .MuiInput-root": { borderBottom: "none" },
+          "& .MuiInputBase-root": { height: "100%" },
+        }}
+        placeholder="جستجوی تخصص"
+        dir="rtl"
+        className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+      />
+      <Button
+        className="
                     !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
                     !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
                     !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
                 "
-            >
-                <SearchD />
-            </Button>
-        </ButtonGroup>
-    )
+      >
+        <SearchD />
+      </Button>
+    </ButtonGroup>
+  );
 }
 
-export default SearchBar
+export default SearchBar;

components/clinics/head/modal/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useState } from "react";
 import { styleDefault } from "@/mui";
@@ -12,109 +12,105 @@ import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import SettingD from "@/components/icons/SettingD";
 
 function ModalSearchCity() {
+  const states = [
+    { label: "تهران", id: 10 },
+    { label: "اصفهان", id: 20 },
+    { label: "مازندران", id: 30 },
+  ];
 
-    const states = [
-        { label: 'تهران', id: 10 },
-        { label: 'اصفهان', id: 20 },
-        { label: 'مازندران', id: 30 }
-    ];
+  const cities = [
+    { label: "شهر یک", id: 10 },
+    { label: "شهر دو", id: 20 },
+    { label: "شهر سه", id: 30 },
+  ];
 
-    const cities = [
-        { label: 'شهر یک', id: 10 },
-        { label: 'شهر دو', id: 20 },
-        { label: 'شهر سه', id: 30 }
-    ];
+  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);
+  const [selected, setSelected] = useState({
+    first: "",
+    second: "",
+  });
 
-    const [selected, setSelected] = useState({
-        first: '',
-        second: ''
-    });
+  const updateData = (event, name) =>
+    setSelected({ ...selected, [name]: event.target.innerText });
 
-    const updateData = (event, name) =>
-        setSelected({ ...selected, [name]: event.target.innerText })
-
-    return (
-        <>
-            {/* Button Modal */}
-            <Button
-                className="
+  return (
+    <>
+      {/* Button Modal */}
+      <Button
+        className="
                     !border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
                     !py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
                 "
-                onClick={handleOpen}
-                variant="contained"
-                color="secondary"
-            >
-                <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
-                    <SettingD />
-                </div>
-                <p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
-                    {/* {selected.first && selected.second ?
+        onClick={handleOpen}
+        variant="contained"
+        color="secondary"
+      >
+        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
+          <SettingD />
+        </div>
+        <p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
+          {/* {selected.first && selected.second ?
                         `${selected.first} | ${selected.second}` : 'فیلترها'} */}
-                    فیلترها
-                </p>
-                <div className='w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]'>
-                    <ArrowBottomD />
-                </div>
-            </Button>
-            {/* Content Modal */}
-            <Modal
-                open={open}
-                onClose={handleClose}
+          فیلترها
+        </p>
+        <div className="w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]">
+          <ArrowBottomD />
+        </div>
+      </Button>
+      {/* Content Modal */}
+      <Modal open={open} onClose={handleClose}>
+        <Box
+          sx={styleDefault}
+          className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
+        >
+          <div className="flex justify-between w-full">
+            <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
+            <Button
+              className="cursor-pointer !p-0 flex items-center justify-center gap-1"
+              onClick={handleClose}
+              variant="text"
             >
-                <Box
-                    sx={styleDefault}
-                    className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
-                >
-                    <div
-                        className="flex justify-between w-full"
-                    >
-                        <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
-                        <Button
-                            className="cursor-pointer !p-0 flex items-center justify-center gap-1"
-                            onClick={handleClose}
-                            variant="text"
-                        >
-                            <CloseOrangeModal />
-                            <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
-                        </Button>
-                    </div>
-                    <div className="px-[24px] pb-[24px]">
-                        <p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
-                        <div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
-                            <AutoCompleteSelect
-                                updateData={updateData}
-                                label='استان'
-                                list={states}
-                                name='first'
-                            />
-                            <AutoCompleteSelect
-                                updateData={updateData}
-                                list={cities}
-                                name='second'
-                                label='شهر'
-                            />
-                        </div>
-                        <div className="w-full flex justify-end">
-                            <Button
-                                color="primary"
-                                variant="contained"
-                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
-                                onClick={handleClose}
-                            >
-                                تایید و ادامه
-                                <ArrowLeftM />
-                            </Button>
-                        </div>
-                    </div>
-                </Box>
-            </Modal>
-        </>
-    )
+              <CloseOrangeModal />
+              <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
+            </Button>
+          </div>
+          <div className="px-[24px] pb-[24px]">
+            <p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">
+              شهر یا استان مورد نظر را انتخاب نمایید:
+            </p>
+            <div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
+              <AutoCompleteSelect
+                updateData={updateData}
+                label="استان"
+                list={states}
+                name="first"
+              />
+              <AutoCompleteSelect
+                updateData={updateData}
+                list={cities}
+                name="second"
+                label="شهر"
+              />
+            </div>
+            <div className="w-full flex justify-end">
+              <Button
+                color="primary"
+                variant="contained"
+                className="flex !px-3 items-center justify-center gap-1 mr-auto"
+                onClick={handleClose}
+              >
+                تایید و ادامه
+                <ArrowLeftM />
+              </Button>
+            </div>
+          </div>
+        </Box>
+      </Modal>
+    </>
+  );
 }
 
-export default ModalSearchCity
+export default ModalSearchCity;

components/clinics/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useEffect, useState } from "react";
 
@@ -7,26 +7,25 @@ import SearchBar from "./head/SearchBar";
 import HeadPageList from "@/app/component/head";
 
 function ClinicsPage() {
+  const [loading, setLoading] = useState(true);
 
-    const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
 
-    useEffect(() => {
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    }, []);
-
-    return (
-        <div>
-            <HeadPageList
-                title='لیست کلینیک ها و درمانگاه های تخصصی'
-                detail='در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید'
-            >
-                <SearchBar />
-            </HeadPageList>
-            <List loading={loading} />
-        </div>
-    )
+  return (
+    <div>
+      <HeadPageList
+        title="لیست کلینیک ها و درمانگاه های تخصصی"
+        detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
+      >
+        <SearchBar />
+      </HeadPageList>
+      <List loading={loading} />
+    </div>
+  );
 }
 
-export default ClinicsPage
+export default ClinicsPage;

components/clinics/list/ItemClinic.js

@@ -1,59 +1,62 @@
-import CircularLoading from "@/app/component/loading/Circular"
-import TextLoading from "@/app/component/loading/Text"
-import ArrowLeftD from "@/components/icons/ArrowLeftD"
-import ClockClinic from "@/components/icons/ClockClinic"
-import LocationClinic from "@/components/icons/LocationClinic"
-import { Button } from "@mui/material"
-import Image from "next/image"
-import Link from "next/link"
+import CircularLoading from "@/app/component/loading/Circular";
+import TextLoading from "@/app/component/loading/Text";
+import ArrowLeftD from "@/components/icons/ArrowLeftD";
+import ClockClinic from "@/components/icons/ClockClinic";
+import LocationClinic from "@/components/icons/LocationClinic";
+import { Button } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
 
 function ItemClinic({ data, loading }) {
-    return (
-        <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
-            <div className="flex items-center justify-start gap-2">
-                <CircularLoading loading={loading} width={60} height={60}>
-                    <Image
-                        width={60}
-                        height={60}
-                        src={data.img}
-                        alt="img clinic"
-                    />
-                </CircularLoading>
-                <div className="flex flex-col items-start justify-center gap-2">
-                    <TextLoading loading={loading} width={100} height={18}>
-                        <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
-                    </TextLoading>
-                    <TextLoading loading={loading} width={60} height={18}>
-                        <p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
-                    </TextLoading>
-                </div>
-            </div>
-            <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
-                <div className="flex items-start justify-start gap-0.5">
-                    <LocationClinic />
-                    <TextLoading loading={loading} width={150} height={18}>
-                        <p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
-                    </TextLoading>
-                </div>
-                <div className="flex items-start justify-start gap-0.5 ml-[64px]">
-                    <ClockClinic />
-                    <TextLoading loading={loading} width={120} height={18}>
-                        <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
-                    </TextLoading>
-                </div>
-            </div>
+  return (
+    <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
+      <div className="flex items-center justify-start gap-2">
+        <CircularLoading loading={loading} width={60} height={60}>
+          <Image width={60} height={60} src={data.img} alt="img clinic" />
+        </CircularLoading>
+        <div className="flex flex-col items-start justify-center gap-2">
+          <TextLoading loading={loading} width={100} height={18}>
+            <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
+          </TextLoading>
+          <TextLoading loading={loading} width={60} height={18}>
+            <p className="text-[#7E7E7E] text-[14px] font-normal">
+              {data.doctors} پزشک
+            </p>
+          </TextLoading>
+        </div>
+      </div>
+      <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
+        <div className="flex items-start justify-start gap-0.5">
+          <LocationClinic />
+          <TextLoading loading={loading} width={150} height={18}>
+            <p className="text-[#7E7E7E] text-[12px] font-normal">
+              {data.location}
+            </p>
+          </TextLoading>
+        </div>
+        <div className="flex items-start justify-start gap-0.5 ml-[64px]">
+          <ClockClinic />
+          <TextLoading loading={loading} width={120} height={18}>
+            <p className="text-[#7E7E7E] text-[12px] font-normal">
+              ساعت کاری: {data.hours_of_work}
+            </p>
+          </TextLoading>
+        </div>
+      </div>
 
-            {/* Arrow */}
-            <Link href={loading ? '#' : `/clinic/${data.id}`}>
-                <Button
-                    className={`${loading ? '!bg-[#E7E7E7]' : '!bg-[#5559CE]'} !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit`}
-                    disabled={loading}
-                >
-                    <ArrowLeftD />
-                </Button>
-            </Link>
-        </li>
-    )
+      {/* Arrow */}
+      <Link href={loading ? "#" : `/clinic/${data.id}`}>
+        <Button
+          className={`${
+            loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
+          } !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit`}
+          disabled={loading}
+        >
+          <ArrowLeftD />
+        </Button>
+      </Link>
+    </li>
+  );
 }
 
-export default ItemClinic
+export default ItemClinic;

components/clinics/list/index.js

@@ -1,32 +1,27 @@
-import Pageguide from "@/app/component/Pageguide"
-import clinics from '@/data/clinics.json';
+import Pageguide from "@/app/component/Pageguide";
+import clinics from "@/data/clinics.json";
 import ItemClinic from "./ItemClinic";
 import Pagination from "@/app/component/Pagination";
 
 function List({ loading }) {
+  const listPage = ["کلینیک ها", "اهواز"];
 
-    const listPage = ['کلینیک ها', 'اهواز'];
-
-    return (
-        <div className="padding-responsive pt-[20px]">
-            <Pageguide
-                list={listPage}
-            />
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
-            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6">
-                {clinics.map(item => (
-                    <ItemClinic
-                        data={item}
-                        key={item.id}
-                        loading={loading}
-                    />
-                ))}
-            </ul>
-            <div className='mt-[48px] flex justify-center'>
-                <Pagination />
-            </div>
-        </div>
-    )
+  return (
+    <div className="padding-responsive pt-[20px]">
+      <Pageguide list={listPage} />
+      <ul
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
+            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
+      >
+        {clinics.map((item) => (
+          <ItemClinic data={item} key={item.id} loading={loading} />
+        ))}
+      </ul>
+      <div className="mt-[48px] flex justify-center">
+        <Pagination />
+      </div>
+    </div>
+  );
 }
 
-export default List
+export default List;