hamid zarghami
78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
'use client'
|
||
import SectionHeader from '@/components/SectionHeader'
|
||
import ServiceItem from '@/components/ServiceItem'
|
||
import { clx } from '@/helpers/utils'
|
||
import { FC, useState } from 'react'
|
||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||
import { useGetCategories, useGetServicesByCategory } from './hooks/useProductData'
|
||
import Image from 'next/image'
|
||
const DanakServices: FC = () => {
|
||
|
||
const [categoryId, setCategoryId] = useState<string>('')
|
||
const { data: categories } = useGetCategories()
|
||
const { data } = useGetServicesByCategory(categoryId)
|
||
|
||
return (
|
||
<div className='xl:mt-24 mt-12 max-w-maxWidth mx-auto'>
|
||
<SectionHeader
|
||
title='سرویس های داناک'
|
||
/>
|
||
|
||
<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'>
|
||
همه
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
{
|
||
categories?.data?.categories?.map((item) => {
|
||
return (
|
||
<SwiperSlide className='max-w-[158px]' key={item.id}>
|
||
<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'
|
||
)}>
|
||
<div className='size-5 rounded-full overflow-hidden bg-blue-100'>
|
||
<Image src={item.icon} alt={item.title} width={20} height={20} />
|
||
</div>
|
||
<div className='text-sm'>
|
||
{item.title}
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
)
|
||
})
|
||
}
|
||
</Swiper>
|
||
</div>
|
||
|
||
<div className='xl:mt-16 mt-10 flex flex-wrap gap-8'>
|
||
{data?.data?.services?.map((item) => {
|
||
return (
|
||
<div key={item.id} className='xl:min-w-[30%] min-w-[70%] flex-1'>
|
||
<ServiceItem
|
||
isShort
|
||
item={item}
|
||
/>
|
||
</div>
|
||
)
|
||
})}
|
||
|
||
<div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
|
||
<div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DanakServices |