hamid zarghami
119 lines
6.3 KiB
TypeScript
119 lines
6.3 KiB
TypeScript
import { FC, useState } from 'react'
|
|
import TitleLine from '../../../components/TitleLine'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useServiceData'
|
|
import { SwiperSlide, Swiper } from 'swiper/react'
|
|
import { CategoryItemType, ItemServiceType } from '../types/ServiecTypes'
|
|
import { clx } from '../../../helpers/utils'
|
|
import ServiceItem from '../../../components/ServiceItem'
|
|
|
|
const OtherServicesComponent: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const [categoryId, setCategoryId] = useState<string>('')
|
|
const getCategory = useGetCategoriesPublic()
|
|
const getServices = useGetServicesByCategory(categoryId)
|
|
|
|
return (
|
|
<div>
|
|
<div className='w-full mt-8'>
|
|
<TitleLine title={t('service.other_services')} />
|
|
</div>
|
|
|
|
<div className='mt-6'>
|
|
<Swiper
|
|
className='w-full'
|
|
spaceBetween={15} // فاصله پیشفرض بین اسلایدها
|
|
slidesPerView='auto'
|
|
>
|
|
<SwiperSlide className='max-w-[158px]'>
|
|
<div onClick={() => setCategoryId('')} className={clx(
|
|
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
|
'' === categoryId && 'bg-white'
|
|
)}>
|
|
<div className='text-sm'>{t('all')}</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
{
|
|
getCategory.data?.data?.categories?.map((item: CategoryItemType) => {
|
|
return (
|
|
<SwiperSlide key={item.id} className='max-w-[158px]'>
|
|
<div onClick={() => setCategoryId(item.id)} className={clx(
|
|
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
|
item.id === categoryId && 'bg-white'
|
|
)}>
|
|
<img src={item.icon} className='size-5 rounded-full object-cover' />
|
|
<div className='text-sm'>{item.title}</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
)
|
|
})
|
|
}
|
|
|
|
</Swiper>
|
|
</div>
|
|
|
|
|
|
|
|
<div className='flex w-full gap-6 items-center'>
|
|
<div className='flex items-stretch w-full flex-wrap xl:gap-6 gap-4 mt-8'>
|
|
{
|
|
getServices.data?.data?.services?.map((item: ItemServiceType) => {
|
|
return (
|
|
<ServiceItem
|
|
key={item.id}
|
|
item={item}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
<div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* <a target='_blank' key={item.id} href={item.status === 'ACTIVE' ? item.plan.service.link + item.id : '#'} className={clx(
|
|
'flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6 flex flex-col items-center self-stretch',
|
|
item.status === 'INACTIVE' && 'opacity-50'
|
|
)}>
|
|
<div className="flex-grow">
|
|
<ServiceSection
|
|
item={{
|
|
author: item.plan.service.author,
|
|
createDate: item.plan?.service?.createDate,
|
|
createdAt: item.createdAt,
|
|
description: item.plan?.service?.title,
|
|
icon: item.plan?.service.icon,
|
|
id: item.plan.service.id,
|
|
isActive: item.plan.isActive,
|
|
isDanakSuggest: item.plan.service.isDanakSuggest,
|
|
link: item.plan.service.link,
|
|
metaDescription: item.plan.service.metaDescription,
|
|
name: item.plan.service.name,
|
|
serviceLanguage: item.plan.service.serviceLanguage,
|
|
softwareLanguage: item.plan.service.softwareLanguage,
|
|
updatedAt: item.plan.service.updatedAt,
|
|
userCount: item.plan.service?.userCount,
|
|
title: item.plan.service.title,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='mt-6 flex gap-1 items-center'>
|
|
<StatusCircle
|
|
color={item.status === 'ACTIVE' ? '#00BA4B' : '#FF0000'}
|
|
/>
|
|
<div className='text-xs text-description'>
|
|
{
|
|
item.status === 'ACTIVE' ?
|
|
t('active')
|
|
:
|
|
t('inactive')
|
|
}
|
|
</div>
|
|
</div>
|
|
</a> */}
|
|
</div >
|
|
)
|
|
}
|
|
|
|
export default OtherServicesComponent |