page clinics & page clinic item head and tabs about

components/clinics/head/SearchBar.js

@@ -3,6 +3,7 @@ import SearchD from '@/components/icons/SearchD'
 import SettingD from '@/components/icons/SettingD'
 import { Button, ButtonGroup, TextField } from '@mui/material'
 import React from 'react'
+import ModalSearchCity from './modal'
 
 function SearchBar() {
     return (
@@ -10,19 +11,7 @@ function SearchBar() {
             variant="contained"
             className="!bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
         >
-            <Button
-                className="!border-none !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
-                variant="contained"
-                color="secondary"
-            >
-                <div className="min-w-[20px] min-h-[20px]">
-                    <SettingD />
-                </div>
-                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
-                <div className='min-w-[24px]'>
-                    <ArrowBottomD />
-                </div>
-            </Button>
+            <ModalSearchCity />
             <TextField
                 variant="standard"
                 InputProps={{

components/clinics/head/modal/index.js

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } from "react";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal } from "@mui/material";
+
+// Icon
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import ArrowBottomD from "@/components/icons/ArrowBottomD";
+import CloseModalD from "@/components/icons/CloseModalD";
+import ArrowLeftM from "@/components/icons/ArrowLeftM";
+import SettingD from "@/components/icons/SettingD";
+import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
+
+function ModalSearchCity() {
+
+    const states = [
+        { label: 'تهران', id: 10 },
+        { label: 'اصفهان', id: 20 },
+        { label: 'مازندران', id: 30 }
+    ];
+
+    const cities = [
+        { label: 'شهر یک', id: 10 },
+        { label: 'شهر دو', id: 20 },
+        { label: 'شهر سه', id: 30 }
+    ];
+
+    const [open, setOpen] = useState(true);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <>
+            {/* Button Modal */}
+            <Button
+                className="!border-none !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
+                onClick={handleOpen}
+                variant="contained"
+                color="secondary"
+            >
+                <div className="min-w-[20px] min-h-[20px]">
+                    <SettingD />
+                </div>
+                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
+                <div className='min-w-[24px]'>
+                    <ArrowBottomD />
+                </div>
+            </Button>
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box sx={styleDefault}>
+                    <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
+                                list={states}
+                                label='استان'
+                            />
+                            <AutoCompleteSelect
+                                list={cities}
+                                label='شهر'
+                            />
+                        </div>
+                        <div className="w-full flex justify-end">
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
+                            >
+                                تایید و ادامه
+                                <ArrowLeftM />
+                            </Button>
+                        </div>
+                    </div>
+                </Box>
+            </Modal>
+        </>
+    )
+}
+
+export default ModalSearchCity

components/clinics/list/index.js

@@ -1,7 +1,7 @@
 import Pageguide from "@/app/component/Pageguide"
 import clinics from '@/data/clinics.json';
 import ItemClinic from "./ItemClinic";
-import { Pagination } from "@mui/material";
+import Pagination from "@/app/component/Pagination";
 
 function List() {