add loading all page & change bugs

This commit is contained in:
Ehsan
2024-09-05 22:20:18 +03:30
parent 087ed4a818
commit c45a161fcb
72 changed files with 1208 additions and 661 deletions
@@ -2,8 +2,10 @@
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 }) {
function AboutDcotor({ doctor, loading }) {
const [isMore, setIsMore] = useState(false);
@@ -14,24 +16,26 @@ function AboutDcotor({ 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">
<p
className={`
<MultilineLoading loading={loading} width='full' height={18} line={30}>
<p
className={`
text-[#616161] text-[14px] font-normal text-justify 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]'
}
'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>
>{doctor.detail}</p>
<Button
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
onClick={() => setIsMore(!isMore)}
variant="text"
>
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
</Button>
</MultilineLoading>
</div>
<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>
@@ -39,7 +43,9 @@ function AboutDcotor({ doctor }) {
{doctor.specialties.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>
<p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
<TextLoading loading={loading} width={70} height={18}>
<p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
</TextLoading>
</li>
))}
</ul>