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

This commit is contained in:
Ehsan
2025-06-07 04:22:52 +03:30
parent 0a8874c4ab
commit 7d6a9e6e33
38 changed files with 502 additions and 264 deletions
+23 -35
View File
@@ -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" }}
/>
</>
);
}
+7 -6
View File
@@ -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>
+4 -4
View File
@@ -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>
);
}