responsive danak-services

2025-04-15 10:22:38 +03:30
parent 6320cc0784
commit 9bba9156a3
14 changed files with 362 additions and 269 deletions
@@ -0,0 +1,78 @@
+'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