update design and request pages dashboards & doctors & doctor item & clinics & clinic item and layout

2025-06-07 04:22:52 +03:30
parent 0a8874c4ab
commit 7d6a9e6e33
38 changed files with 502 additions and 264 deletions
@@ -1,45 +1,33 @@
-import CustomLoading from "@/app/component/loading/Custom";
-import MultilineLoading from "@/app/component/loading/Multiline";
 import Image from "next/image";
 import React from "react";

-function Caption({ data, loading }) {
+function Caption({ data }) {
  return (
    <>
-      <CustomLoading loading={loading} width="full" height={500}>
-        <Image
-          className="rounded-[8px] overflow-hidden w-full"
-          src={data?.cover_first}
-          alt="cover-blog"
-          height={570}
-          width={808}
+      <Image
+        className="rounded-[8px] overflow-hidden w-full"
+        src={data?.cover_first}
+        alt="cover-blog"
+        height={570}
+        width={808}
+      />
+      <div>
+        <div
+          className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+          dangerouslySetInnerHTML={{ __html: "data?.caption" }}
        />
-      </CustomLoading>
-      <div className={loading ? "my-4" : ""}>
-        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-          <div
-            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-            dangerouslySetInnerHTML={{ __html: data?.caption }}
-          />
-        </MultilineLoading>
-      </div>
-      <CustomLoading loading={loading} width="full" height={500}>
-        <Image
-          className="rounded-[8px] overflow-hidden w-full"
-          src={data?.cover_second}
-          alt="cover-blog"
-          height={570}
-          width={808}
-        />
-      </CustomLoading>
-      <div className={loading ? "my-4" : ""}>
-        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-          <div
-            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-            dangerouslySetInnerHTML={{ __html: data?.caption }}
-          />
-        </MultilineLoading>
      </div>
+      <Image
+        className="rounded-[8px] overflow-hidden w-full"
+        src={data?.cover_second}
+        alt="cover-blog"
+        height={570}
+        width={808}
+      />
+      <div
+        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+        dangerouslySetInnerHTML={{ __html: "data?.caption" }}
+      />
    </>
  );
 }
@@ -5,15 +5,16 @@ import WhatsappB from "@/components/icons/WhatsappB";

 const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];

-function SocialMedia({ loading }) {
+function SocialMedia() {
  return (
    <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
      {socials.map((item, idx) => (
-        <CircularLoading width={36} key={idx} height={36} loading={loading}>
-          <li className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]">
-            {item}
-          </li>
-        </CircularLoading>
+        <li
+          key={idx}
+          className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+        >
+          {item}
+        </li>
      ))}
      <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
    </ul>
@@ -2,12 +2,12 @@ import Caption from "./Caption";
 import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";

-function Detail({ data, loading }) {
+function Detail({ data }) {
  return (
    <div className="w-full lg:w-[68%]">
-      <Caption data={data} loading={loading} />
-      <SocialMedia loading={loading} />
-      <CommentUser data={data} loading={loading} />
+      <Caption data={data} />
+      <SocialMedia />
+      <CommentUser data={data} loading={false} />
    </div>
  );
 }
@@ -1,52 +1,38 @@
-import TextLoading from "@/app/component/loading/Text";
-
-function Head({ data, loading }) {
+function Head({ data }) {
  return (
    <div>
-      <TextLoading width={200} height={18} loading={loading}>
-        <div className="flex items-center justify-start gap-1">
-          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-            بلاگ {">"}
-          </p>
-          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-            پوست و مو {">"}
-          </p>
-          <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-            روش های خانگی محافظت از پوست در تابستان
-          </p>
-        </div>
-      </TextLoading>
-      <div
-        className={
-          loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
-        }
-      >
-        <TextLoading width={250} height={22} loading={loading}>
-          <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
-            روش های خانگی محافظت از پوست در تابستان
-          </h1>
-        </TextLoading>
+      <div className="flex items-center justify-start gap-1">
+        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          بلاگ {">"}
+        </p>
+        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          پوست و مو {">"}
+        </p>
+        <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          روش های خانگی محافظت از پوست در تابستان
+        </p>
+      </div>
+      <div>
+        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
+          روش های خانگی محافظت از پوست در تابستان
+        </h1>
      </div>
      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
        <div className="flex items-center justify-start gap-1">
          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
            تاریخ انتشار:
          </p>
-          <TextLoading width={55} height={22} loading={loading}>
-            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-              {data?.date_of_release}
-            </p>
-          </TextLoading>
+          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+            {data?.date_of_release}
+          </p>
        </div>
        <div className="flex items-center justify-start gap-1">
          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
            زمان مطالعه:
          </p>
-          <TextLoading width={55} height={22} loading={loading}>
-            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-              {data?.time}
-            </p>
-          </TextLoading>
+          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+            {data?.time}
+          </p>
        </div>
      </div>
    </div>
@@ -1,25 +1,14 @@
-"use client";
-
-import { useEffect, useState } from "react";
 import Detail from "./detail";
 import Head from "./head";
 import RelatedContent from "./relatedContent";

-function BlogPage({ article, articles }) {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
+function BlogPage({ blog, blogs }) {
  return (
    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-      <Head data={article} loading={loading} />
+      <Head data={blog} />
      <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-        <Detail data={article} loading={loading} />
-        <RelatedContent data={articles} loading={loading} />
+        <Detail data={blog} />
+        <RelatedContent data={blogs} />
      </div>
    </div>
  );
@@ -10,9 +10,11 @@ function RelatedContent({ data, loading }) {
        <UnderlineLG />
      </AnimationTextHead>
      <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
-        {data?.map((item, idx) => (
-          <Item idx={idx} data={item} key={item.id} loading={loading} />
-        ))}
+        {data &&
+          data.length &&
+          data?.map((item, idx) => (
+            <Item idx={idx} data={item} key={item.id} loading={loading} />
+          ))}
      </ul>
    </div>
  );