create component elements & add page clinics && add url clinic

2024-08-08 22:00:09 +03:30
parent 57d33a532c
commit 01de360360
13 changed files with 440 additions and 0 deletions
@@ -0,0 +1,18 @@
+import ClinicPage from '@/components/clinic';
+import Layout from '@/components/layout';
+import clinics from '@/data/clinics.json';
+
+function Blog({ params: { slug } }) {
+
+    const clinic = clinics.find(item => item.id === +slug);
+
+    return (
+        <Layout title='کلینیک' name='clinic'>
+            <ClinicPage
+                data={clinic}
+            />
+        </Layout>
+    )
+}
+
+export default Blog
@@ -0,0 +1,12 @@
+import ClinicsPage from '@/components/clinics';
+import Layout from '@/components/layout';
+
+function Clinics() {
+    return (
+        <Layout title='کلینیک ها' name='specialties'>
+            <ClinicsPage />
+        </Layout>
+    )
+}
+
+export default Clinics
@@ -0,0 +1,26 @@
+function Pageguide({ list }) {
+    return (
+        <ul className='flex items-center justify-start gap-1'>
+            {list.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="flex items-center justify-start gap-1"
+                >
+                    <p
+                        className={`text-[16px] font-normal
+                            ${list.length > idx + 1 ? 'text-[#9B9B9B]' : 'text-[#525252]'}
+                            `}
+                    >{item}</p>
+                    <span
+                        className={`
+                            text-[#9B9B9B] text-[16px] font-normal
+                            ${list.length > idx + 1 ? 'flex' : 'hidden'}
+                            `}
+                    >{'>'}</span>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Pageguide
@@ -0,0 +1,13 @@
+function HeadPageList({ children, title, detail }) {
+    return (
+        <div className="bg-[#F6F7F9]">
+            <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">{title}</p>
+                <p className="text-[#3B3B3B] text-[16px] text-center font-normal">{detail}</p>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default HeadPageList
@@ -0,0 +1,7 @@
+function ClinicPage({data}) {
+  return (
+    <div>ClinicPage</div>
+  )
+}
+
+export default ClinicPage
@@ -0,0 +1,55 @@
+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() {
+    return (
+        <ButtonGroup
+            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>
+            <TextField
+                variant="standard"
+                InputProps={{
+                    disableUnderline: true
+                }}
+                sx={{
+                    '& .MuiInputBase-root': {
+                        height: '100%'
+                    },
+                    '& .MuiInput-root': {
+                        borderBottom: 'none',
+                    },
+                    '& .MuiInputBase-input': {
+                        color: '#7E7E7E'
+                    }
+                }}
+                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]`}
+            />
+            <Button
+                className="!rounded-[4px] !ml-1 !min-w-[56px] !min-h-[56px] !gap-2.5 !p-4"
+            >
+                <SearchD />
+            </Button>
+        </ButtonGroup>
+    )
+}
+
+export default SearchBar
@@ -0,0 +1,19 @@
+import HeadPageList from "@/app/component/head";
+import List from "./list";
+import SearchBar from "./head/SearchBar";
+
+function ClinicsPage() {
+    return (
+        <div className="">
+            <HeadPageList
+                title='لیست کلینیک ها و درمانگاه های تخصصی'
+                detail='در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید'
+            >
+                <SearchBar />
+            </HeadPageList>
+            <List />
+        </div>
+    )
+}
+
+export default ClinicsPage
@@ -0,0 +1,46 @@
+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 }) {
+    return (
+        <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
+            <div className="flex items-center justify-start gap-2">
+                <Image
+                    width={60}
+                    height={60}
+                    src={data.img}
+                    alt="img clinic"
+                />
+                <div className="flex flex-col items-start justify-center gap-2">
+                    <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
+                    <p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
+                </div>
+            </div>
+            <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
+                <div className="flex items-center justify-start gap-0.5">
+                    <LocationClinic />
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
+                </div>
+                <div className="flex items-center justify-start gap-0.5">
+                    <ClockClinic />
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
+                </div>
+            </div>
+
+            {/* Arrow */}
+            <Link href={`/clinic/${data.id}`}>
+                <Button
+                    className='!p-[14px] !bg-[#5559CE] !absolute !left-4 !bottom-4  !rounded-full !w-fit'
+                >
+                    <ArrowLeftD />
+                </Button>
+            </Link>
+        </li>
+    )
+}
+
+export default ItemClinic
@@ -0,0 +1,30 @@
+import Pageguide from "@/app/component/Pageguide"
+import clinics from '@/data/clinics.json';
+import ItemClinic from "./ItemClinic";
+import { Pagination } from "@mui/material";
+
+function List() {
+
+    const listPage = ['کلینیک ها', 'اهواز']
+
+    return (
+        <div className="padding-responsive pt-[20px]">
+            <Pageguide
+                list={listPage}
+            />
+            <ul className="grid grid-cols-3 gap-x-[24px] gap-y-[40px] mt-6">
+                {clinics.map(item => (
+                    <ItemClinic
+                        data={item}
+                        key={item.id}
+                    />
+                ))}
+            </ul>
+            <div className='mt-[48px] flex justify-center'>
+                <Pagination />
+            </div>
+        </div>
+    )
+}
+
+export default List
@@ -0,0 +1,10 @@
+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" />
+        </svg>
+    )
+}
+
+export default ClockClinic
@@ -0,0 +1,10 @@
+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" />
+        </svg>
+    )
+}
+
+export default LocationClinic
@@ -0,0 +1,194 @@
+[
+    {
+        "id": 1,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 2,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 3,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 4,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 5,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 6,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 7,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 8,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 9,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 10,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 11,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 12,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 13,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 14,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 15,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 16,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 17,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 18,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 19,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 20,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 21,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 22,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 23,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22"
+    },
+    {
+        "id": 24,
+        "img": "/assets/images/clinic-img.png",
+        "title": "کلینیک تخصصی و فوق تخصصی نیکان",
+        "doctors": "۵۰",
+        "location": "اهواز، کیان آباد، خیابان 16 غربی، پلاک 10",
+        "hours_of_work": "ساعت کاری: شنبه تا سه شنبه ساعت 16 تا 22"
+    }
+]