57 lines
2.3 KiB
JavaScript
57 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@mui/material";
|
|
import MultilineLoading from "@/app/component/loading/Multiline";
|
|
import TextLoading from "@/app/component/loading/Text";
|
|
|
|
function AboutDcotor({ doctor }) {
|
|
const [isMore, setIsMore] = useState(false);
|
|
|
|
return (
|
|
<div>
|
|
<a
|
|
id="about-doctor"
|
|
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
|
|
></a>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<MultilineLoading width="full" height={18} line={30}>
|
|
<p
|
|
className={` text-[#616161] text-[14px] font-normal overflow-hidden relative md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px] after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)] ${ isMore ? "after:bg-transparent max-h-screen" : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]" } `}
|
|
>
|
|
{doctor?.detail}
|
|
</p>
|
|
<Button
|
|
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
|
|
onClick={() => setIsMore(!isMore)}
|
|
variant="text"
|
|
>
|
|
{isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
|
|
</Button>
|
|
</MultilineLoading>
|
|
</div>
|
|
{doctor?.expertise?.length > 0 && (
|
|
<div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
|
|
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
|
خدمات
|
|
</p>
|
|
<ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
|
|
{doctor.expertise.map((item, idx) => (
|
|
<li key={idx} className="flex items-center justify-start gap-1">
|
|
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
|
|
<TextLoading width={70} height={18}>
|
|
<h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
|
|
{item.name}
|
|
</h4>
|
|
</TextLoading>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AboutDcotor;
|