install and handle casle & prevent page dashboard & handle register and code verfication & get data in clinics page

components/clinics/index.js

@@ -1,15 +1,13 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import List from "./list";
 import { searchOnList } from "@/helper";
 import SearchBar from "./head/SearchBar";
-import clinics from "@/data/clinics.json";
 import HeadPageList from "@/app/component/head";
 
-function ClinicsPage({ matchedCity, matchedState }) {
-  const [loading, setLoading] = useState(true);
+function ClinicsPage({ clinics, matchedCity, matchedState }) {
   const [filteredClinics, setFilteredClinics] = useState(clinics);
 
   const [selected, setSelected] = useState({
@@ -17,12 +15,6 @@ function ClinicsPage({ matchedCity, matchedState }) {
     city: matchedCity?.name || "",
   });
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   const handleSearch = (value) => {
     const searchOnName = searchOnList(clinics, value, "title");
     const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
@@ -42,7 +34,7 @@ function ClinicsPage({ matchedCity, matchedState }) {
           handleSearch={handleSearch}
         />
       </HeadPageList>
-      <List loading={loading} selected={selected} clinics={filteredClinics} />
+      <List selected={selected} clinics={filteredClinics} />
     </div>
   );
 }

components/clinics/list/ItemClinic.js

@@ -7,20 +7,25 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 
-function ItemClinic({ data, loading }) {
+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">
-        <CircularLoading loading={loading} width={60} height={60}>
-          <Image width={60} height={60} src={data.img} alt="img clinic" />
+        <CircularLoading width={60} height={60}>
+          <Image
+            width={60}
+            height={60}
+            src={data.clinic_logo.url || ""}
+            alt="img clinic"
+          />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading loading={loading} width={100} height={18}>
+          <TextLoading width={100} height={18}>
             <h3 className="text-[#3B3B3B] text-[14px] font-bold">
-              {data.title}
+              {data.label}
             </h3>
           </TextLoading>
-          <TextLoading loading={loading} width={60} height={18}>
+          <TextLoading width={60} height={18}>
             <p className="text-[#7E7E7E] text-[14px] font-normal">
               {data.doctors} پزشک
             </p>
@@ -30,7 +35,7 @@ function ItemClinic({ data, loading }) {
       <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
         <div className="flex items-start justify-start gap-0.5">
           <LocationClinic />
-          <TextLoading loading={loading} width={150} height={18}>
+          <TextLoading width={150} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
               {data.location}
             </p>
@@ -38,7 +43,7 @@ function ItemClinic({ data, loading }) {
         </div>
         <div className="flex items-start justify-start gap-0.5 ml-[64px]">
           <ClockClinic />
-          <TextLoading loading={loading} width={120} height={18}>
+          <TextLoading width={120} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
               ساعت کاری: {data.hours_of_work}
             </p>
@@ -47,13 +52,8 @@ function ItemClinic({ data, loading }) {
       </div>
 
       {/* Arrow */}
-      <Link href={loading ? "#" : `/clinic/${data.id}`}>
-        <Button
-          className={`${
-            loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
-          } !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit`}
-          disabled={loading}
-        >
+      <Link href={`/clinic/${data.id}`}>
+        <Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit">
           <ArrowLeftD />
         </Button>
       </Link>

components/clinics/list/index.js

@@ -2,7 +2,7 @@ import Pageguide from "@/app/component/Pageguide";
 import ItemClinic from "./ItemClinic";
 import Pagination from "@/app/component/Pagination";
 
-function List({ loading, selected, clinics }) {
+function List({ selected, clinics }) {
   const listPage = ["کلینیک ها", selected?.city || ""];
 
   return (
@@ -18,7 +18,7 @@ function List({ loading, selected, clinics }) {
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
         >
           {clinics.map((item) => (
-            <ItemClinic data={item} key={item.id} loading={loading} />
+            <ItemClinic data={item} key={item.id} />
           ))}
         </ul>
       )}