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,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