page clinics & page clinic item head and tabs about

components/clinic/Tabs.js

@@ -0,0 +1,47 @@
+import { Box, Tab, Tabs as TabsMUI } from '@mui/material';
+
+function a11yProps(index) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+};
+
+const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
+
+function Tabs({ value, handleChange }) {
+    return (
+        <Box
+            className="!border-none"
+        >
+            <TabsMUI
+                value={value}
+                onChange={handleChange}
+                sx={{
+                    '.MuiTabs-fixed': {
+                        overflow: 'auto !important'
+                    },
+                    '.MuiTabs-indicator': {
+                        height: '2px',
+                        borderRadius: '10px',
+                        background: '#F17732'
+                    },
+                    '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
+                        color: '#F17732 !important'
+                    }
+                }}
+            >
+                {listTab.map((item, idx) => (
+                    <Tab
+                        key={idx}
+                        label={item}
+                        {...a11yProps(idx)}
+                        className="text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold !mr-2"
+                    />
+                ))}
+            </TabsMUI>
+        </Box>
+    )
+}
+
+export default Tabs

components/clinic/components/Contact.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Contact() {
+    return (
+        <div>Contact</div>
+    )
+}
+
+export default Contact

components/clinic/components/Doctors.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Doctors() {
+    return (
+        <div>Doctors</div>
+    )
+}
+
+export default Doctors

components/clinic/components/about/ContentDetail.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function ContentDetail({ head, children }) {
+    return (
+        <div className='my-[24px]'>
+            <p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
+            <div className='mt-[16px]'>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default ContentDetail

components/clinic/components/about/Images.js

@@ -0,0 +1,47 @@
+import Image from 'next/image';
+
+function Images({ data }) {
+    return (
+        <div className='flex items-center mb-[8px] justify-center gap-[24px] w-full'>
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[0]}
+                alt="img clinic"
+                height={432}
+                width={600}
+            />
+            <div className="grid grid-cols-2 gap-[24px]">
+                <Image
+                    className="rounded-[8px] overflow-hidden"
+                    src={data.images_clinic[1]}
+                    alt="img clinic"
+                    height={204}
+                    width={288}
+                />
+                <Image
+                    className="rounded-[8px] overflow-hidden"
+                    src={data.images_clinic[2]}
+                    alt="img clinic"
+                    height={204}
+                    width={288}
+                />
+                <Image
+                    className="rounded-[8px] overflow-hidden"
+                    src={data.images_clinic[3]}
+                    alt="img clinic"
+                    height={204}
+                    width={288}
+                />
+                <Image
+                    className="rounded-[8px] overflow-hidden"
+                    src={data.images_clinic[4]}
+                    alt="img clinic"
+                    height={204}
+                    width={288}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default Images

components/clinic/components/about/ListBime.js

@@ -0,0 +1,24 @@
+import Image from 'next/image'
+
+function ListBime({ data }) {
+    return (
+        <ul className='flex items-center justify-center gap-[24px]'>
+            {data.list_bime.map((item, idx) => (
+                <li
+                    key={idx}
+                    className='p-[16px] 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>
+            ))}
+        </ul>
+    )
+}
+
+export default ListBime

components/clinic/components/about/index.js

@@ -0,0 +1,23 @@
+import Image from "next/image"
+import Images from "./Images"
+import ContentDetail from "./ContentDetail"
+import ListBime from "./ListBime"
+
+function About({ data }) {
+    return (
+        <div>
+            <Images data={data} />
+            <ContentDetail head='کلینیک تخصصی و فوق تخصصی نیکان'>
+                <p
+                    className="text-[#525252] text-[16px] font-normal leading-[32px]"
+                    dangerouslySetInnerHTML={{ __html: data.caption }}
+                ></p>
+            </ContentDetail>
+            <ContentDetail head='بیمه های طرف قرارداد'>
+                <ListBime data={data} />
+            </ContentDetail>
+        </div>
+    )
+}
+
+export default About

components/clinic/index.js

@@ -1,6 +1,33 @@
-function ClinicPage({data}) {
+'use client';
+import { useState } from 'react';
+
+import Tabs from "./Tabs";
+import About from './components/about';
+import Contact from './components/Contact';
+import Doctors from './components/Doctors';
+
+
+function ClinicPage({ data }) {
+
+  const [value, setValue] = useState(0);
+  const handleChange = (event, newValue) => setValue(newValue);
+
+  const Components = [
+    <About data={data} />,
+    <Contact data={data} />,
+    <Doctors data={data} />
+  ];
+
   return (
-    <div>ClinicPage</div>
+    <div className="pt-[136px] mt-[40px] padding-responsive">
+      <Tabs
+        value={value}
+        handleChange={handleChange}
+      />
+      <div className='mt-[32px]'>
+        {Components[value]}
+      </div>
+    </div>
   )
 }
 

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() {
 

components/icons/ArrowLeftD.js

@@ -1,8 +1,8 @@
 function ArrowLeftD() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M7.97533 4.94167L2.91699 10L7.97533 15.0583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M17.0836 10H3.05859" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M7.97533 4.94167L2.91699 10L7.97533 15.0583" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.0836 10H3.05859" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/ArrowUpComment.js

@@ -1,7 +1,7 @@
 function ArrowUpComment() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M16.6004 12.5417L11.1671 7.10833C10.5254 6.46666 9.47539 6.46666 8.83372 7.10833L3.40039 12.5417" stroke="#0FA1B3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M16.6004 12.5417L11.1671 7.10833C10.5254 6.46666 9.47539 6.46666 8.83372 7.10833L3.40039 12.5417" stroke="#0FA1B3" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/ClockClinic.js

@@ -1,8 +1,8 @@
 function ClockClinic() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M18.3346 10C18.3346 14.6 14.6013 18.3333 10.0013 18.3333C5.4013 18.3333 1.66797 14.6 1.66797 10C1.66797 5.40001 5.4013 1.66667 10.0013 1.66667C14.6013 1.66667 18.3346 5.40001 18.3346 10Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.0914 12.65L10.5081 11.1083C10.0581 10.8417 9.69141 10.2 9.69141 9.675V6.25833" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M18.3346 10C18.3346 14.6 14.6013 18.3333 10.0013 18.3333C5.4013 18.3333 1.66797 14.6 1.66797 10C1.66797 5.40001 5.4013 1.66667 10.0013 1.66667C14.6013 1.66667 18.3346 5.40001 18.3346 10Z" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0914 12.65L10.5081 11.1083C10.0581 10.8417 9.69141 10.2 9.69141 9.675V6.25833" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/ClockD.js

@@ -1,8 +1,8 @@
 function ClockD() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M18.3337 10C18.3337 14.6 14.6003 18.3333 10.0003 18.3333C5.40033 18.3333 1.66699 14.6 1.66699 10C1.66699 5.4 5.40033 1.66666 10.0003 1.66666C14.6003 1.66666 18.3337 5.4 18.3337 10Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.0914 12.65L10.5081 11.1083C10.0581 10.8417 9.69141 10.2 9.69141 9.675V6.25833" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M18.3337 10C18.3337 14.6 14.6003 18.3333 10.0003 18.3333C5.40033 18.3333 1.66699 14.6 1.66699 10C1.66699 5.4 5.40033 1.66666 10.0003 1.66666C14.6003 1.66666 18.3337 5.4 18.3337 10Z" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0914 12.65L10.5081 11.1083C10.0581 10.8417 9.69141 10.2 9.69141 9.675V6.25833" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/ClockTurn.js

@@ -1,8 +1,8 @@
 function ClockTurn() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
-            <path d="M18.3337 10.5C18.3337 15.1 14.6003 18.8333 10.0003 18.8333C5.40033 18.8333 1.66699 15.1 1.66699 10.5C1.66699 5.9 5.40033 2.16666 10.0003 2.16666C14.6003 2.16666 18.3337 5.9 18.3337 10.5Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.0914 13.15L10.5081 11.6083C10.0581 11.3417 9.69141 10.7 9.69141 10.175V6.75833" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M18.3337 10.5C18.3337 15.1 14.6003 18.8333 10.0003 18.8333C5.40033 18.8333 1.66699 15.1 1.66699 10.5C1.66699 5.9 5.40033 2.16666 10.0003 2.16666C14.6003 2.16666 18.3337 5.9 18.3337 10.5Z" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0914 13.15L10.5081 11.6083C10.0581 11.3417 9.69141 10.7 9.69141 10.175V6.75833" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/CloseOrangeModal.js

@@ -0,0 +1,9 @@
+function CloseOrangeModal() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+            <path d="M12.5947 4.30667C12.533 4.24486 12.4597 4.19583 12.3791 4.16238C12.2984 4.12892 12.212 4.1117 12.1247 4.1117C12.0374 4.1117 11.9509 4.12892 11.8703 4.16238C11.7896 4.19583 11.7164 4.24486 11.6547 4.30667L8.39468 7.56L5.13468 4.3C5.07296 4.23828 4.99969 4.18932 4.91904 4.15592C4.8384 4.12251 4.75197 4.10532 4.66468 4.10532C4.57739 4.10532 4.49096 4.12251 4.41032 4.15592C4.32968 4.18932 4.2564 4.23828 4.19468 4.3C4.13296 4.36172 4.084 4.435 4.0506 4.51564C4.01719 4.59628 4 4.68271 4 4.77C4 4.85729 4.01719 4.94372 4.0506 5.02436C4.084 5.10501 4.13296 5.17828 4.19468 5.24L7.45468 8.5L4.19468 11.76C4.13296 11.8217 4.084 11.895 4.0506 11.9756C4.01719 12.0563 4 12.1427 4 12.23C4 12.3173 4.01719 12.4037 4.0506 12.4844C4.084 12.565 4.13296 12.6383 4.19468 12.7C4.2564 12.7617 4.32968 12.8107 4.41032 12.8441C4.49096 12.8775 4.57739 12.8947 4.66468 12.8947C4.75197 12.8947 4.8384 12.8775 4.91904 12.8441C4.99969 12.8107 5.07296 12.7617 5.13468 12.7L8.39468 9.44L11.6547 12.7C11.7164 12.7617 11.7897 12.8107 11.8703 12.8441C11.951 12.8775 12.0374 12.8947 12.1247 12.8947C12.212 12.8947 12.2984 12.8775 12.379 12.8441C12.4597 12.8107 12.533 12.7617 12.5947 12.7C12.6564 12.6383 12.7054 12.565 12.7388 12.4844C12.7722 12.4037 12.7894 12.3173 12.7894 12.23C12.7894 12.1427 12.7722 12.0563 12.7388 11.9756C12.7054 11.895 12.6564 11.8217 12.5947 11.76L9.33468 8.5L12.5947 5.24C12.848 4.98667 12.848 4.56 12.5947 4.30667Z" fill="#F17732" />
+        </svg>
+    )
+}
+
+export default CloseOrangeModal

components/icons/GreenCalendarTurn.js

@@ -1,16 +1,16 @@
 function GreenCalendarTurn() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M6.66699 1.66667V4.16667" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.333 1.66667V4.16667" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M2.91699 7.575H17.0837" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M17.5 7.08333V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08333C2.5 4.58333 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58333 17.5 7.08333Z" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.0791 11.4167H13.0866" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M13.0791 13.9167H13.0866" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M9.99607 11.4167H10.0036" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M9.99607 13.9167H10.0036" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M6.91209 11.4167H6.91957" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M6.91209 13.9167H6.91957" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.66699 1.66667V4.16667" stroke="#05BA58" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.333 1.66667V4.16667" stroke="#05BA58" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.91699 7.575H17.0837" stroke="#05BA58" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.5 7.08333V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08333C2.5 4.58333 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58333 17.5 7.08333Z" stroke="#05BA58" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0791 11.4167H13.0866" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0791 13.9167H13.0866" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.99607 11.4167H10.0036" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.99607 13.9167H10.0036" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.91209 11.4167H6.91957" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.91209 13.9167H6.91957" stroke="#05BA58" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/LocationClinic.js

@@ -1,8 +1,8 @@
 function LocationClinic() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M9.99844 11.1917C11.4344 11.1917 12.5984 10.0276 12.5984 8.59167C12.5984 7.15573 11.4344 5.99167 9.99844 5.99167C8.5625 5.99167 7.39844 7.15573 7.39844 8.59167C7.39844 10.0276 8.5625 11.1917 9.99844 11.1917Z" stroke="#7E7E7E" stroke-width="1.5" />
-            <path d="M3.0148 7.07501C4.65646 -0.14166 15.3481 -0.133326 16.9815 7.08334C17.9398 11.3167 15.3065 14.9 12.9981 17.1167C11.3231 18.7333 8.67313 18.7333 6.9898 17.1167C4.6898 14.9 2.05646 11.3083 3.0148 7.07501Z" stroke="#7E7E7E" stroke-width="1.5" />
+            <path d="M9.99844 11.1917C11.4344 11.1917 12.5984 10.0276 12.5984 8.59167C12.5984 7.15573 11.4344 5.99167 9.99844 5.99167C8.5625 5.99167 7.39844 7.15573 7.39844 8.59167C7.39844 10.0276 8.5625 11.1917 9.99844 11.1917Z" stroke="#7E7E7E" strokeWidth="1.5" />
+            <path d="M3.0148 7.07501C4.65646 -0.14166 15.3481 -0.133326 16.9815 7.08334C17.9398 11.3167 15.3065 14.9 12.9981 17.1167C11.3231 18.7333 8.67313 18.7333 6.9898 17.1167C4.6898 14.9 2.05646 11.3083 3.0148 7.07501Z" stroke="#7E7E7E" strokeWidth="1.5" />
         </svg>
     )
 }

components/icons/LocationTurn.js

@@ -1,8 +1,8 @@
 function LocationTurn() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
-            <path d="M10.0004 11.6917C11.4363 11.6917 12.6004 10.5276 12.6004 9.09167C12.6004 7.65573 11.4363 6.49167 10.0004 6.49167C8.56445 6.49167 7.40039 7.65573 7.40039 9.09167C7.40039 10.5276 8.56445 11.6917 10.0004 11.6917Z" stroke="#7E7E7E" stroke-width="1.5" />
-            <path d="M3.01675 7.57501C4.65842 0.35834 15.3501 0.366674 16.9834 7.58334C17.9417 11.8167 15.3084 15.4 13.0001 17.6167C11.3251 19.2333 8.67508 19.2333 6.99175 17.6167C4.69175 15.4 2.05842 11.8083 3.01675 7.57501Z" stroke="#7E7E7E" stroke-width="1.5" />
+            <path d="M10.0004 11.6917C11.4363 11.6917 12.6004 10.5276 12.6004 9.09167C12.6004 7.65573 11.4363 6.49167 10.0004 6.49167C8.56445 6.49167 7.40039 7.65573 7.40039 9.09167C7.40039 10.5276 8.56445 11.6917 10.0004 11.6917Z" stroke="#7E7E7E" strokeWidth="1.5" />
+            <path d="M3.01675 7.57501C4.65842 0.35834 15.3501 0.366674 16.9834 7.58334C17.9417 11.8167 15.3084 15.4 13.0001 17.6167C11.3251 19.2333 8.67508 19.2333 6.99175 17.6167C4.69175 15.4 2.05842 11.8083 3.01675 7.57501Z" stroke="#7E7E7E" strokeWidth="1.5" />
         </svg>
     )
 }

components/icons/MenuS.js

@@ -2,10 +2,10 @@ function MenuS() {
     return (
         <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="44" height="44" rx="22" fill="#FFD8C5" fill-opacity="0.5" />
-            <path d="M27 20H29C31 20 32 19 32 17V15C32 13 31 12 29 12H27C25 12 24 13 24 15V17C24 19 25 20 27 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M15 32H17C19 32 20 31 20 29V27C20 25 19 24 17 24H15C13 24 12 25 12 27V29C12 31 13 32 15 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M28 32C30.2091 32 32 30.2091 32 28C32 25.7909 30.2091 24 28 24C25.7909 24 24 25.7909 24 28C24 30.2091 25.7909 32 28 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M27 20H29C31 20 32 19 32 17V15C32 13 31 12 29 12H27C25 12 24 13 24 15V17C24 19 25 20 27 20Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15 32H17C19 32 20 31 20 29V27C20 25 19 24 17 24H15C13 24 12 25 12 27V29C12 31 13 32 15 32Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M28 32C30.2091 32 32 30.2091 32 28C32 25.7909 30.2091 24 28 24C25.7909 24 24 25.7909 24 28C24 30.2091 25.7909 32 28 32Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
     )

components/icons/ShareDI.js

@@ -1,7 +1,7 @@
 function ShareDI() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
-            <path d="M7.19298 9.19535C6.71412 8.23951 5.72552 7.58334 4.58366 7.58334C2.97283 7.58334 1.66699 8.88917 1.66699 10.5C1.66699 12.1108 2.97283 13.4167 4.58366 13.4167C5.72552 13.4167 6.71412 12.7605 7.19298 11.8047M7.19298 9.19535C7.38964 9.58792 7.50033 10.031 7.50033 10.5C7.50033 10.969 7.38964 11.4121 7.19298 11.8047M7.19298 9.19535L12.8077 6.388M7.19298 11.8047L12.8077 14.612M12.8077 6.388C13.2865 7.34384 14.2751 8.00001 15.417 8.00001C17.0278 8.00001 18.3337 6.69417 18.3337 5.08334C18.3337 3.47251 17.0278 2.16667 15.417 2.16667C13.8062 2.16667 12.5003 3.47251 12.5003 5.08334C12.5003 5.55231 12.611 5.99543 12.8077 6.388ZM12.8077 14.612C12.611 15.0046 12.5003 15.4477 12.5003 15.9167C12.5003 17.5275 13.8062 18.8333 15.417 18.8333C17.0278 18.8333 18.3337 17.5275 18.3337 15.9167C18.3337 14.3058 17.0278 13 15.417 13C14.2751 13 13.2865 13.6562 12.8077 14.612Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M7.19298 9.19535C6.71412 8.23951 5.72552 7.58334 4.58366 7.58334C2.97283 7.58334 1.66699 8.88917 1.66699 10.5C1.66699 12.1108 2.97283 13.4167 4.58366 13.4167C5.72552 13.4167 6.71412 12.7605 7.19298 11.8047M7.19298 9.19535C7.38964 9.58792 7.50033 10.031 7.50033 10.5C7.50033 10.969 7.38964 11.4121 7.19298 11.8047M7.19298 9.19535L12.8077 6.388M7.19298 11.8047L12.8077 14.612M12.8077 6.388C13.2865 7.34384 14.2751 8.00001 15.417 8.00001C17.0278 8.00001 18.3337 6.69417 18.3337 5.08334C18.3337 3.47251 17.0278 2.16667 15.417 2.16667C13.8062 2.16667 12.5003 3.47251 12.5003 5.08334C12.5003 5.55231 12.611 5.99543 12.8077 6.388ZM12.8077 14.612C12.611 15.0046 12.5003 15.4477 12.5003 15.9167C12.5003 17.5275 13.8062 18.8333 15.417 18.8333C17.0278 18.8333 18.3337 17.5275 18.3337 15.9167C18.3337 14.3058 17.0278 13 15.417 13C14.2751 13 13.2865 13.6562 12.8077 14.612Z" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" />
         </svg>
     )
 }

components/icons/SortD.js

@@ -1,9 +1,9 @@
 function SortD() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
-            <path d="M3.125 7H21.875" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
-            <path d="M6.25 12H18.75" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
-            <path d="M10.417 17H14.5837" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M3.125 7H21.875" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="M6.25 12H18.75" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="M10.417 17H14.5837" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" />
         </svg>
     )
 }

components/icons/TickCircle.js

@@ -1,8 +1,8 @@
 function TickCircle() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#05BA58" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="#05BA58" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#05BA58" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="#05BA58" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/UserLogin.js

@@ -1,8 +1,8 @@
 function UserLogin() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#3B3B3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26003 15 3.41003 18.13 3.41003 22" stroke="#3B3B3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#3B3B3B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26003 15 3.41003 18.13 3.41003 22" stroke="#3B3B3B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }