97 lines
5.6 KiB
JavaScript
97 lines
5.6 KiB
JavaScript
import CircularLoading from '@/app/component/loading/Circular';
|
|
import TextLoading from '@/app/component/loading/Text';
|
|
import CalendarD from '@/components/icons/CalendarD';
|
|
import CallD from '@/components/icons/CallD';
|
|
import ClockClinic from '@/components/icons/ClockClinic';
|
|
import DownloadD from '@/components/icons/DownloadD';
|
|
import LocationClinic from '@/components/icons/LocationClinic';
|
|
import RoutingC from '@/components/icons/RoutingC';
|
|
import TicketD from '@/components/icons/TicketD';
|
|
import { Button } from '@mui/material';
|
|
import Image from 'next/image'
|
|
import React from 'react'
|
|
|
|
function DetailLg({ user, loading }) {
|
|
|
|
const data = user.turns[1];
|
|
|
|
return (
|
|
<div className='lg:mt-[18px] hidden md:block'>
|
|
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
|
|
<CircularLoading width={95} height={95} loading={loading}>
|
|
<Image
|
|
width={95}
|
|
height={95}
|
|
alt='profile'
|
|
src={data.image}
|
|
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
|
|
/>
|
|
</CircularLoading>
|
|
<div className='flex flex-col items-start justify-center gap-[20px]'>
|
|
<TextLoading loading={loading} width={70} height={18}>
|
|
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
|
|
</TextLoading>
|
|
<TextLoading loading={loading} width={80} height={18}>
|
|
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
|
|
</TextLoading>
|
|
</div>
|
|
</div>
|
|
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
|
|
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
|
|
<TextLoading loading={loading} width={100} height={20}>
|
|
<div className='flex items-start justify-start gap-[4px]'>
|
|
<CalendarD />
|
|
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
|
|
</div>
|
|
</TextLoading>
|
|
<TextLoading loading={loading} width={100} height={20}>
|
|
<div className='flex items-start justify-start gap-[4px]'>
|
|
<ClockClinic />
|
|
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
|
|
</div>
|
|
</TextLoading>
|
|
</li>
|
|
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
|
|
<TextLoading loading={loading} width={250} height={20}>
|
|
<div className='flex items-start justify-start gap-[4px]'>
|
|
<LocationClinic />
|
|
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
|
|
</div>
|
|
</TextLoading>
|
|
<TextLoading loading={loading} width={120} height={30}>
|
|
<Button
|
|
className='!py-[8px] !px-[12px] !gap-[8px]'
|
|
variant='text'
|
|
>
|
|
<RoutingC />
|
|
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
|
</Button>
|
|
</TextLoading>
|
|
</li>
|
|
<TextLoading loading={loading} width={120} height={18}>
|
|
<li className='flex items-center justify-start gap-[4px]'>
|
|
<CallD />
|
|
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
|
|
</li>
|
|
</TextLoading>
|
|
</ul>
|
|
<div className='flex items-center gap-[4px] w-fit'>
|
|
<TextLoading loading={loading} width={150} height={18}>
|
|
<TicketD />
|
|
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
|
</TextLoading>
|
|
</div>
|
|
<Button
|
|
className='!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]'
|
|
variant='outlined'
|
|
>
|
|
<TextLoading loading={loading} width={150} height={18}>
|
|
<DownloadD />
|
|
<p className='text-[#616161] text-[16px] font-medium'>دانلود اطلاعات نوبت</p>
|
|
</TextLoading>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DetailLg |