change data clinics & page clinics tab about & contact & doctors

2024-08-13 01:23:44 +03:30
parent f5ce58ef90
commit 5568a989fe
27 changed files with 368 additions and 92 deletions
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function Contact() {
-    return (
-        <div>Contact</div>
-    )
-}
-
-export default Contact
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function Doctors() {
-    return (
-        <div>Doctors</div>
-    )
-}
-
-export default Doctors
@@ -2,7 +2,7 @@ import Image from 'next/image'

 function ListBime({ data }) {
    return (
-        <ul className='flex items-center justify-center gap-[24px]'>
+        <ul className='flex mt-[8px] items-center justify-center gap-[24px]'>
            {data.list_bime.map((item, idx) => (
                <li
                    key={idx}
@@ -0,0 +1,24 @@
+import TickCircleOrange from '@/components/icons/TickCircleOrange';
+
+function Services({ data }) {
+  return (
+    <ul className='mt-[8px] w-full p-[22px] gap-x-[64px] gap-y-[40px] rounded-[8px] bg-[#FFF] grid grid-cols-4'>
+      {data.specialties.map((item, idx) => (
+        <li
+          key={idx}
+          className='flex items-center justify-start gap-2'
+        >
+          <TickCircleOrange />
+          <p
+            className={`
+            text-[16px] font-normal
+            ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
+          `}
+          >{item}</p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Services
@@ -0,0 +1,24 @@
+import TickCircleOrange from '@/components/icons/TickCircleOrange';
+
+function Specialties({ data }) {
+    return (
+        <ul className='mt-[8px] w-full p-[22px] gap-x-[64px] gap-y-[40px] rounded-[8px] bg-[#FFF] grid grid-cols-4'>
+            {data.specialties.map((item, idx) => (
+                <li
+                    key={idx}
+                    className='flex items-center justify-start gap-2'
+                >
+                    <TickCircleOrange />
+                    <p
+                        className={`
+                        text-[16px] font-normal
+                        ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
+                    `}
+                    >{item}</p>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Specialties
@@ -2,10 +2,12 @@ import Image from "next/image"
 import Images from "./Images"
 import ContentDetail from "./ContentDetail"
 import ListBime from "./ListBime"
+import Specialties from "./Specialties"
+import Services from "./Services"

 function About({ data }) {
    return (
-        <div>
+        <div className="opacity-page transition-all duration-500">
            <Images data={data} />
            <ContentDetail head='کلینیک تخصصی و فوق تخصصی نیکان'>
                <p
@@ -16,6 +18,12 @@ function About({ data }) {
            <ContentDetail head='بیمه های طرف قرارداد'>
                <ListBime data={data} />
            </ContentDetail>
+            <ContentDetail head='تخصص ها'>
+                <Specialties data={data} />
+            </ContentDetail>
+            <ContentDetail head='خدمات'>
+                <Services data={data} />
+            </ContentDetail>
        </div>
    )
 }
@@ -0,0 +1,10 @@
+function ContentDetail({ head, detail }) {
+    return (
+        <li className="flex flex-col items-start justify-center gap-4">
+            <p className="text-[#525252] text-[20px] font-bold">{head}</p>
+            <p>{detail}</p>
+        </li>
+    )
+}
+
+export default ContentDetail;
@@ -0,0 +1,26 @@
+import ContentDetail from "./ContentDetail"
+
+function Detail({ data }) {
+    return (
+        <ul className="flex flex-col items-start justify-start gap-[16px]">
+            <ContentDetail
+                head='روزهای کاری: '
+                detail={`ساعت کاری: ${data.hours_of_work}`}
+            />
+            <ContentDetail
+                head='تلفن: '
+                detail={`${data.phone_number_1} ${data.phone_number_2}`}
+            />
+            <ContentDetail
+                head='ایمیل:'
+                detail={data.email}
+            />
+            <ContentDetail
+                head='آدرس: '
+                detail={data.location}
+            />
+        </ul>
+    )
+}
+
+export default Detail
@@ -0,0 +1,29 @@
+import { Button } from "@mui/material"
+import Detail from "./Detail"
+import RoutingC from "@/components/icons/RoutingC"
+
+function Contact({ data }) {
+    return (
+        <div className="opacity-page py-[32px] px-[64px] border border-[#EFEFEF] rounded-[16px]">
+            <div className="flex items-end justify-between">
+                <Detail data={data} />
+                <Button
+                    className="!gap-[8px] !py-[8px] !px-[12px]"
+                    variant="outlined"
+                >
+                    <RoutingC />
+                    مسیریابی
+                </Button>
+            </div>
+            <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-[460px] rounded-lg mt-[24px]'
+                referrerPolicy="no-referrer-when-downgrade"
+                allowFullScreen=""
+                loading="lazy"
+            ></iframe>
+        </div>
+    )
+}
+
+export default Contact
@@ -0,0 +1,22 @@
+import ItemDoctor from '@/app/component/ItemDoctor';
+import Pagination from '@/app/component/Pagination';
+
+function List({ doctors }) {
+    return (
+        <>
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[24px]">
+                {doctors.map(doctor => (
+                    <ItemDoctor
+                        key={doctor.id}
+                        doctor={doctor}
+                    />
+                ))}
+            </ul>
+            <div className='mt-[56px] flex justify-center'>
+                <Pagination />
+            </div>
+        </>
+    )
+}
+
+export default List
@@ -0,0 +1,13 @@
+import SmSearch from '@/components/searchHead/SmSearch';
+
+function SearchBar() {
+    return (
+        <div className="flex justify-center">
+            <SmSearch
+                placeholder='جستجوی پزشک یا تخصص'
+            />
+        </div>
+    )
+}
+
+export default SearchBar
@@ -0,0 +1,16 @@
+import ItemDoctor from "@/app/component/ItemDoctor"
+import Pagination from "@/app/component/Pagination"
+import SmSearch from "@/components/searchHead/SmSearch"
+import List from "./List"
+import SearchBar from "./SearchBar"
+
+function Doctors({ doctors }) {
+    return (
+        <div className="opacity-page">
+            <SearchBar />
+            <List doctors={doctors} />
+        </div>
+    )
+}
+
+export default Doctors
@@ -3,11 +3,11 @@ import { useState } from 'react';

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


-function ClinicPage({ data }) {
+function ClinicPage({ data, doctors }) {

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

  return (
@@ -26,7 +26,7 @@ function ModalSearchCity() {
        { label: 'شهر سه', id: 30 }
    ];

-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

@@ -1,72 +0,0 @@
-import Image from "next/image"
-import { Button } from "@mui/material"
-
-// Icons
-import ArrowLeftD from "@/components/icons/ArrowLeftD"
-import ClockD from "@/components/icons/ClockD"
-import LikeD from "@/components/icons/LikeD"
-import PointD from "@/components/icons/PointD"
-import Link from "next/link"
-
-function ItemDoctor({ doctor }) {
-    return (
-        <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
-            {/* Detail Doctor */}
-            <div className="flex items-center justify-start gap-2.5">
-                <Image
-                    width={72}
-                    height={72}
-                    src={doctor.img}
-                    alt="image-doctor"
-                    className="py-1.5"
-                />
-                <div className="flex flex-col items-start justify-center gap-2">
-                    <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
-                    <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
-                    <div className="flex rounded items-center justify-start gap-2">
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
-                            <LikeD />
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
-                        </div>
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
-                            <PointD />
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* Hours of work */}
-            <div className="flex my-4 items-center justify-start gap-0.5">
-                <ClockD />
-                <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
-            </div>
-            <p
-                className={`text-[12px] font-medium rounded w-fit p-1.5
-                    ${doctor.free_turn ?
-                        'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
-                        'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
-                    }`}
-            >{doctor.free_turn ?
-                `اولین نوبت آزاد: ${doctor.free_turn}` :
-                'نوبت ندارد'
-                }</p>
-
-            {/* Arrow */}
-            <Link href={`/doctor/${doctor.id}`}>
-                <Button
-                    className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                    ${doctor.free_turn ?
-                            '!bg-[#5559CE]' :
-                            '!bg-[#D7D7D7]'
-                        }`}
-                    disabled={!doctor.free_turn}
-                >
-                    <ArrowLeftD />
-                </Button>
-            </Link>
-        </li>
-    )
-}
-
-export default ItemDoctor
@@ -1,10 +1,10 @@
 import doctors from '@/data/doctors.json'
-import ItemDoctor from './ItemDoctor';
 import Pagination from '@/app/component/Pagination';
+import ItemDoctor from '@/app/component/ItemDoctor';

 function ListDoctors() {
    return (
-        <div>
+        <>
            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[64px] gap-[24px]">
                {doctors.map(doctor => (
                    <ItemDoctor
@@ -16,7 +16,7 @@ function ListDoctors() {
            <div className='mt-[56px] flex justify-center'>
                <Pagination />
            </div>
-        </div>
+        </>
    )
 }

@@ -0,0 +1,14 @@
+function RoutingC() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 4V2" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4 12H2" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 20V22" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M20 12H22" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default RoutingC
@@ -0,0 +1,10 @@
+function TickCircleOrange() {
+    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="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.75 12L10.58 14.83L16.25 9.16998" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default TickCircleOrange
@@ -13,6 +13,8 @@ import UserLogin from "@/components/icons/UserLogin";
 function Header({ name }) {

    const [isActive, setIsActive] = useState(false);
+    console.log(name);
+

    return (
        <div
@@ -4,6 +4,9 @@ import Link from "next/link";
 import { isActiveURL } from "@/helper";

 function Col({ isActive, setIsActive, name }) {
+
+    console.log(name);
+
    return (
        <div className="flex lg:hidden">
            {/* <Button variant="text" className="!p-0.5">
@@ -0,0 +1,7 @@
+function LgSearch() {
+  return (
+    <div>LgSearch</div>
+  )
+}
+
+export default LgSearch
@@ -1,10 +1,7 @@
-import ArrowBottomD from '@/components/icons/ArrowBottomD'
 import SearchD from '@/components/icons/SearchD'
-import SettingD from '@/components/icons/SettingD'
 import { Button, ButtonGroup, TextField } from '@mui/material'
-import React from 'react'

-function SearchBar() {
+function SmSearch({ placeholder }) {
    return (
        <ButtonGroup
            variant="contained"
@@ -26,7 +23,7 @@ function SearchBar() {
                        color: '#7E7E7E'
                    }
                }}
-                placeholder="جستجوی تخصص"
+                placeholder={placeholder}
                dir='rtl'
                className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
            />
@@ -39,4 +36,4 @@ function SearchBar() {
    )
 }

-export default SearchBar
+export default SmSearch
@@ -1,4 +1,4 @@
-import SearchBar from "./SearchBar"
+import SmSearch from "@/components/searchHead/SmSearch";

 function Head() {
    return (
@@ -6,7 +6,7 @@ function Head() {
            <div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
                <p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
                <p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
-                <SearchBar />
+                <SmSearch placeholder='جستجوی تخصص' />
            </div>
        </div>
    )