hamid zarghami
116 lines
5.7 KiB
TypeScript
116 lines
5.7 KiB
TypeScript
import { Carousel } from '@material-tailwind/react'
|
||
import { FC, Fragment } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { ArrowLeft } from 'iconsax-react'
|
||
import TitleLine from '../../components/TitleLine'
|
||
import { useGetSuggestedServices } from './hooks/useServiceData'
|
||
import PageLoading from '../../components/PageLoading'
|
||
import { ItemServiceType } from './types/ServiecTypes'
|
||
import ServiceItem from '../../components/ServiceItem'
|
||
import OtherServicesComponent from './components/OtherServices'
|
||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
|
||
|
||
|
||
const OtherServices: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
|
||
const getSuggestedServices = useGetSuggestedServices()
|
||
const getAds = useGetAds(AdsDisplayLocation.OTHER_SERVICES_TOP)
|
||
const getAdsLeft = useGetAds(AdsDisplayLocation.OTHER_SERVICES_LEFT)
|
||
|
||
return (
|
||
<div className='w-full flex gap-6'>
|
||
<div className='flex-1'>
|
||
{
|
||
getSuggestedServices.isPending || getAdsLeft.isPending ?
|
||
<PageLoading />
|
||
:
|
||
<Fragment>
|
||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||
{
|
||
getAds.data?.data?.ads?.map((item: AdsItemType) => {
|
||
return (
|
||
<div key={item.id} className='relative drtl'>
|
||
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||
<div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||
{t('home.new')}
|
||
</button>
|
||
|
||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||
<div>
|
||
{item.title}
|
||
</div>
|
||
<div className='mt-3 text-border text-xs'>
|
||
۸ دقیقه مطالعه
|
||
</div>
|
||
{
|
||
<a href={item.link}>
|
||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||
<div>
|
||
{t('home.study')}
|
||
</div>
|
||
<ArrowLeft size={14} color='white' />
|
||
</button>
|
||
</a>
|
||
}
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</Carousel>
|
||
|
||
|
||
<div className='w-full mt-8'>
|
||
<TitleLine title={t('service.selected_danak')} />
|
||
</div>
|
||
|
||
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||
{
|
||
getSuggestedServices.data?.data?.danakServices?.map((item: ItemServiceType) => (
|
||
<ServiceItem
|
||
key={item.id}
|
||
item={item}
|
||
/>
|
||
))
|
||
}
|
||
<div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
|
||
</div>
|
||
|
||
|
||
|
||
<OtherServicesComponent />
|
||
|
||
|
||
|
||
<div className='h-16 xl:hidden'></div>
|
||
</Fragment>
|
||
}
|
||
|
||
|
||
</div>
|
||
{
|
||
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
|
||
<div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||
<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>
|
||
</div>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default OtherServices |