single service + 404 page and 500 page
This commit is contained in:
hamid zarghami
@@ -0,0 +1,176 @@
|
||||
'use client'
|
||||
import { FC, Fragment } from 'react'
|
||||
import { useGetDetailService } from './hooks/useProductData'
|
||||
import ServiceHeader from './components/ServiceHeader'
|
||||
import moment from 'moment-jalaali'
|
||||
import ServiceImages from './components/ServiceImages'
|
||||
import Image from 'next/image'
|
||||
import Loading from '../loading'
|
||||
import Rate from 'rc-rate'
|
||||
import { ReviewItem } from './types/ProductTypes'
|
||||
|
||||
// Default avatar image
|
||||
const defaultAvatar = '/images/logo.svg' // Using an existing image
|
||||
|
||||
|
||||
const DetailService: FC<{ id: string }> = ({ id }) => {
|
||||
|
||||
// const { t } = useTranslation('global')
|
||||
// const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)
|
||||
|
||||
const getDetailService = useGetDetailService(id)
|
||||
|
||||
// Show the skeleton loading component while data is loading
|
||||
if (getDetailService.isLoading) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
|
||||
{
|
||||
<Fragment>
|
||||
<div className='flex-1 max-w-full'>
|
||||
|
||||
{getDetailService.data?.data.danakService && (
|
||||
<ServiceHeader data={getDetailService.data.data.danakService} />
|
||||
)}
|
||||
<div className='mt-8 flex xl:flex-row flex-col overflowX justify-between items-center xl:gap-8 gap-5'>
|
||||
<div className='bg-white flex xl:min-w-[127px] w-full 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]'>
|
||||
توسعه شرکت
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
دانک
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex xl:min-w-[127px] w-full 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]'>
|
||||
تعداد کاربر
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
+{getDetailService?.data?.data?.danakService?.userCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex xl:min-w-[127px] w-full 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]'>
|
||||
سال تولید
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{getDetailService?.data?.data?.danakService?.createdAt ?
|
||||
moment(getDetailService.data.data.danakService.createdAt).format('jYYYY/jMM/jDD') : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex xl:min-w-[127px] w-full 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]'>
|
||||
زبان برنامه
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{getDetailService?.data?.data?.danakService?.serviceLanguage === 'fa' ? 'فارسی' : 'انگلیسی'}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex xl:min-w-[127px] w-full 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]'>
|
||||
امتیاز
|
||||
</div>
|
||||
<div className='mt-3 dltr flex gap-1 text-sm'>
|
||||
<Rate
|
||||
count={5}
|
||||
style={{ fontSize: 15 }}
|
||||
value={getDetailService?.data?.data?.averageRating}
|
||||
disabled
|
||||
allowHalf
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{getDetailService?.data?.data?.danakService?.images && (
|
||||
<ServiceImages images={getDetailService.data.data.danakService.images} />
|
||||
)}
|
||||
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl'>
|
||||
<div>
|
||||
توضیحات کامل
|
||||
</div>
|
||||
{getDetailService.data?.data?.danakService?.metaDescription && (
|
||||
<p dangerouslySetInnerHTML={{ __html: getDetailService.data.data.danakService.metaDescription }} className='text-[13px] mt-4 leading-6'>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
|
||||
{/* {
|
||||
getDetailService.data?.data?.purchased &&
|
||||
<CreateReview refetch={() => getDetailService.refetch()} />
|
||||
} */}
|
||||
<div className='flex-1 w-full max-w-full bg-white p-6 rounded-3xl'>
|
||||
<div className='text-sm'>
|
||||
نظرات کاربران
|
||||
</div>
|
||||
|
||||
{
|
||||
getDetailService.data?.data.danakService?.reviews?.map((item: ReviewItem) => {
|
||||
return (
|
||||
<div key={item.id} className='mt-5 border border-border rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Image alt='avatar' width={24} height={24} src={item.user?.profilePic || defaultAvatar} className='size-6 rounded-full object-cover' />
|
||||
<div className='text-description text-xs'>
|
||||
{item.user?.firstName + ' ' + item.user?.lastName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex justify-between'>
|
||||
<div className='text-sm max-w-[70%] truncate'>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className='text-xs text-description'>
|
||||
{moment(item.createdAt).fromNow()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-2'>
|
||||
<Rate
|
||||
disabled
|
||||
value={item.rating}
|
||||
count={5}
|
||||
style={{ fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[11px] leading-6'>
|
||||
{item.comment}
|
||||
</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
|
||||
Reference in New Issue
Block a user