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>
   )
 }