change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics

components/clinic/components/about/ContentDetail.js

@@ -1,10 +1,10 @@
 import TextLoading from "@/app/component/loading/Text";
 import React from "react";
 
-function ContentDetail({ head, children, loading }) {
+function ContentDetail({ head, children }) {
   return (
     <div className="my-[24px]">
-      <TextLoading width={200} height={20} loading={loading}>
+      <TextLoading width={200} height={20}>
         <h1 className="text-[#3B3B3B] text-[20px] font-bold">{head}</h1>
       </TextLoading>
       <div className="mt-[16px]">{children}</div>

components/clinic/components/about/ListBime.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import { useRef } from "react";
 
-function ListBime({ data, loading }) {
+function ListBime({ data }) {
   const list = useRef();
 
   const handleScroll = (type) => {
@@ -28,7 +28,7 @@ function ListBime({ data, loading }) {
         className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
       >
         {data?.list_bime?.map((item, idx) => (
-          <CustomLoading width={156} height={110} loading={loading}>
+          <CustomLoading width={156} height={110}>
             <li
               key={idx}
               className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"

components/clinic/components/about/Services.js

@@ -1,7 +1,7 @@
 import TextLoading from "@/app/component/loading/Text";
 import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
-function Services({ data, loading }) {
+function Services({ data }) {
   return (
     <ul
       className="
@@ -14,7 +14,7 @@ function Services({ data, loading }) {
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
-          <TextLoading width={80} height={18} loading={loading}>
+          <TextLoading width={80} height={18}>
             <h3
               className={`
             text-[16px] font-normal 

components/clinic/components/about/Specialties.js

@@ -1,7 +1,7 @@
 import TextLoading from "@/app/component/loading/Text";
 import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
-function Specialties({ data, loading }) {
+function Specialties({ data }) {
   return (
     <ul
       className="
@@ -14,7 +14,7 @@ function Specialties({ data, loading }) {
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
-          <TextLoading width={80} height={18} loading={loading}>
+          <TextLoading width={80} height={18}>
             <h3
               className={`
                         text-[16px] font-normal

components/clinic/components/about/images/Images.js

@@ -3,7 +3,7 @@ import Slider from "./Slider";
 import Image from "next/image";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Images({ data, loading }) {
+function Images({ data }) {
   return (
     <div
       className="
@@ -12,18 +12,23 @@ function Images({ data, loading }) {
         "
     >
       <div className="w-full">
-        <CustomLoading loading={loading} width={600} height={400}>
+        <CustomLoading width={600} height={400}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data?.images_clinic && !!data?.images_clinic.length && data?.images_clinic[0] || ""}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[0]) ||
+              ""
+            }
             alt="img clinic"
             height={432}
             width={600}
           />
         </CustomLoading>
       </div>
-      <List data={data} loading={loading} />
-      <Slider data={data} loading={loading} />
+      <List data={data} />
+      <Slider data={data} />
     </div>
   );
 }

components/clinic/components/about/images/List.js

@@ -1,11 +1,11 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
 
-function List({ data, loading }) {
+function List({ data }) {
   return (
     <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -21,7 +21,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -37,7 +37,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -53,7 +53,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={

components/clinic/components/about/images/Slider.js

@@ -1,14 +1,14 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
 
-function Slider({ data, loading }) {
+function Slider({ data }) {
   return (
     <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
       {data &&
         data.images_clinic &&
         [...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
           idx !== 0 ? (
-            <CustomLoading width={90} height={90} loading={loading}>
+            <CustomLoading width={90} height={90}>
               <Image
                 key={idx}
                 src={item}

components/clinic/components/about/index.js

@@ -8,20 +8,15 @@ import Specialties from "./Specialties";
 import ContentDetail from "./ContentDetail";
 import MultilineLoading from "@/app/component/loading/Multiline";
 
-function About({ data, loading }) {
+function About({ data }) {
   const [isMore, setIsMore] = useState(false);
 
   return (
     <div className="opacity-page transition-all duration-500">
-      <Images data={data} loading={loading} />
-      <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
+      <Images data={data} />
+      <ContentDetail head="کلینیک تخصصی و فوق تخصصی نیکان">
         <div className="flex flex-col items-center justify-center">
-          <MultilineLoading
-            line={10}
-            loading={loading}
-            width="full"
-            height={18}
-          >
+          <MultilineLoading line={10} width="full" height={18}>
             <p
               className={`
                         text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
@@ -37,9 +32,7 @@ function About({ data, loading }) {
             ></p>
           </MultilineLoading>
           <Button
-            className={`${
-              loading && "!hidden"
-            } !text-[#F17732] !text-[14px] !font-light !p-2`}
+            className='!text-[#F17732] !text-[14px] !font-light !p-2'
             onClick={() => setIsMore(!isMore)}
             variant="text"
           >
@@ -48,13 +41,13 @@ function About({ data, loading }) {
         </div>
       </ContentDetail>
       <ContentDetail head="بیمه های طرف قرارداد">
-        <ListBime loading={loading} data={data} />
+        <ListBime data={data} />
       </ContentDetail>
       <ContentDetail head="تخصص ها">
-        <Specialties loading={loading} data={data} />
+        <Specialties data={data} />
       </ContentDetail>
       <ContentDetail head="خدمات">
-        <Services loading={loading} data={data} />
+        <Services data={data} />
       </ContentDetail>
     </div>
   );

components/clinic/components/contact/ContentDetail.js

@@ -1,14 +1,14 @@
 import TextLoading from "@/app/component/loading/Text";
 
-function ContentDetail({ head, detail, loading }) {
+function ContentDetail({ head, detail }) {
   return (
     <li className="flex flex-col items-start justify-center gap-4">
-      <TextLoading width={100} height={18} loading={loading}>
+      <TextLoading width={100} height={18}>
         <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
           {head}
         </p>
       </TextLoading>
-      <TextLoading width={160} height={18} loading={loading}>
+      <TextLoading width={160} height={18}>
         <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
       </TextLoading>
     </li>

components/clinic/components/contact/Detail.js

@@ -1,20 +1,18 @@
 import ContentDetail from "./ContentDetail";
 
-function Detail({ data, loading }) {
+function Detail({ data }) {
   return (
     <ul className="flex flex-col items-start justify-start gap-[16px]">
       <ContentDetail
         head="روزهای کاری: "
-        loading={loading}
         detail={`ساعت کاری: ${data.hours_of_work}`}
       />
       <ContentDetail
         head="تلفن: "
-        loading={loading}
         detail={`${data.phone_number_1} ${data.phone_number_2}`}
       />
-      <ContentDetail head="ایمیل:" loading={loading} detail={data.email} />
-      <ContentDetail head="آدرس: " loading={loading} detail={data.location} />
+      <ContentDetail head="ایمیل:" detail={data.email} />
+      <ContentDetail head="آدرس: " detail={data.location} />
     </ul>
   );
 }

components/clinic/components/contact/index.js

@@ -7,7 +7,7 @@ import RoutingC from "@/components/icons/RoutingC";
 import ModalOpenLocation from "@/app/component/openLocation";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Contact({ data, loading }) {
+function Contact({ data }) {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -21,7 +21,7 @@ function Contact({ data, loading }) {
             "
     >
       <div className="flex items-end justify-between">
-        <Detail data={data} loading={loading} />
+        <Detail data={data} />
         <ModalOpenLocation
           open={open}
           setOpen={setOpen}
@@ -38,7 +38,7 @@ function Contact({ data, loading }) {
         </ModalOpenLocation>
       </div>
       <div className="w-full relative h-[460px] mt-[24px]">
-        <CustomLoading width="full" height={400} loading={loading}>
+        <CustomLoading width="full" height={400}>
           <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-full rounded-lg"

components/clinic/components/doctors/List.js

@@ -1,12 +1,12 @@
 import ItemDoctor from "@/app/component/ItemDoctor";
 import Pagination from "@/app/component/Pagination";
 
-function List({ doctors, loading }) {
+function List({ doctors }) {
   return (
     <>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
         {doctors.map((doctor) => (
-          <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+          <ItemDoctor key={doctor.id} doctor={doctor} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">

components/clinic/components/doctors/index.js

@@ -5,7 +5,7 @@ import List from "./List";
 import { useState } from "react";
 import { searchOnList } from "@/helper";
 
-function Doctors({ doctors, loading }) {
+function Doctors({ doctors }) {
   const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
 
   const handleSearch = (value) =>
@@ -20,7 +20,7 @@ function Doctors({ doctors, loading }) {
           placeholder="جستجوی پزشک یا تخصص"
         />
       </div>
-      <List loading={loading} doctors={filteredSpecialties} />
+      <List doctors={filteredSpecialties} />
     </div>
   );
 }