hamid zarghami
228 lines
14 KiB
TypeScript
228 lines
14 KiB
TypeScript
import { FC, Fragment } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Button from '../../components/Button'
|
||
import Rate from 'rc-rate'
|
||
import ServiceImages from './components/ServiceImages'
|
||
import Input from '../../components/Input'
|
||
import Textarea from '../../components/Textarea'
|
||
import AvatarImage from '../../assets/images/Avatar.png'
|
||
import ServiceHeader from './components/ServiceHeader'
|
||
import { useGetDetailService } from './hooks/useServiceData'
|
||
import { useParams } from 'react-router-dom'
|
||
import PageLoading from '../../components/PageLoading'
|
||
import moment from 'moment-jalaali'
|
||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
|
||
|
||
const DetailService: FC = () => {
|
||
|
||
const { id } = useParams()
|
||
const { t } = useTranslation('global')
|
||
const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)
|
||
|
||
const getDetailService = useGetDetailService(id ? id : '')
|
||
|
||
return (
|
||
<div className='w-full flex gap-6 mt-4'>
|
||
|
||
{
|
||
getDetailService.isPending ?
|
||
<PageLoading />
|
||
:
|
||
<Fragment>
|
||
<div className='flex-1 max-w-full'>
|
||
|
||
<ServiceHeader data={getDetailService?.data?.data?.danakService} />
|
||
<div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
|
||
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||
<div className='text-description xl:text-xs text-[11px]'>
|
||
{t('service.company_develop')}
|
||
</div>
|
||
<div className='mt-3 text-sm'>
|
||
{t('service.company_danak')}
|
||
</div>
|
||
</div>
|
||
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||
<div className='text-description xl:text-xs text-[11px]'>
|
||
{t('service.user_count')}
|
||
</div>
|
||
<div className='mt-3 text-sm'>
|
||
+{getDetailService?.data?.data?.danakService?.userCount}
|
||
</div>
|
||
</div>
|
||
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||
<div className='text-description xl:text-xs text-[11px]'>
|
||
{t('service.year_make')}
|
||
</div>
|
||
<div className='mt-3 text-sm'>
|
||
{moment(getDetailService?.data?.data?.danakService?.createDate, 'jYYYY-jMM-jDD').format('jYYYY')}
|
||
</div>
|
||
</div>
|
||
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||
<div className='text-description xl:text-xs text-[11px]'>
|
||
{t('service.lang_app')}
|
||
</div>
|
||
<div className='mt-3 text-sm'>
|
||
{getDetailService?.data?.data?.danakService?.serviceLanguage === 'fa' ? t('service.persian') : t('service.english')}
|
||
</div>
|
||
</div>
|
||
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||
<div className='text-description xl:text-xs text-[11px]'>
|
||
{t('service.score')}
|
||
</div>
|
||
<div className='mt-3 dltr flex gap-1 text-sm'>
|
||
<Rate
|
||
count={5}
|
||
style={{ fontSize: 15 }}
|
||
value={4}
|
||
disabled
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ServiceImages images={getDetailService?.data?.data?.danakService?.images} />
|
||
|
||
<div className='mt-8 bg-white p-6 rounded-3xl'>
|
||
<div>
|
||
{t('service.compelete_description')}
|
||
</div>
|
||
<p dangerouslySetInnerHTML={{ __html: getDetailService.data?.data?.danakService?.metaDescription }} className='text-[11px] mt-4 leading-6'>
|
||
</p>
|
||
</div>
|
||
|
||
<div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
|
||
<div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
|
||
<div>
|
||
{t('service.submit_comment')}
|
||
</div>
|
||
<div className='text-xs mt-4'>
|
||
{t('service.hint_comment')}
|
||
</div>
|
||
|
||
<div className='mt-6 text-description text-sm'>
|
||
<div>
|
||
{t('service.score')}
|
||
</div>
|
||
<div className='mt-2 dltr flex justify-end'>
|
||
<Rate
|
||
count={5}
|
||
style={{ fontSize: 22 }}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Input
|
||
label={t('service.title')}
|
||
placeholder={t('service.enter_title_comment')}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Textarea
|
||
label={t('service.your_comment')}
|
||
placeholder={t('service.write_your_comment')}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Button
|
||
label={t('service.submit_comment')}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
|
||
<div className='text-sm'>
|
||
{t('service.users_comments')}
|
||
</div>
|
||
|
||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||
<div className='flex gap-2 items-center'>
|
||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||
<div className='text-description text-xs'>
|
||
فروغ براتی
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-4 flex justify-between'>
|
||
<div className='text-sm max-w-[70%] truncate'>
|
||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||
</div>
|
||
<div className='text-xs text-description'>
|
||
۳ روز پیش
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-2'>
|
||
<Rate
|
||
disabled
|
||
value={5}
|
||
count={5}
|
||
style={{ fontSize: 14 }}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-4 text-[11px] leading-6'>
|
||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||
</div>
|
||
</div>
|
||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||
<div className='flex gap-2 items-center'>
|
||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||
<div className='text-description text-xs'>
|
||
فروغ براتی
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-4 flex justify-between'>
|
||
<div className='text-sm max-w-[70%] truncate'>
|
||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||
</div>
|
||
<div className='text-xs text-description'>
|
||
۳ روز پیش
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-2'>
|
||
<Rate
|
||
disabled
|
||
value={5}
|
||
count={5}
|
||
style={{ fontSize: 14 }}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-4 text-[11px] leading-6'>
|
||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{
|
||
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
|
||
<a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden sticky top-4'>
|
||
<img
|
||
src={getAdsLeft.data.data.ads[0].imageUrl}
|
||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||
/>
|
||
|
||
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
|
||
<div className='max-w-[80%] text-sm leading-6 text-white'>
|
||
{getAdsLeft.data.data.ads[0].title}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
}
|
||
</Fragment>
|
||
}
|
||
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DetailService |