other services

2025-02-12 13:17:19 +03:30
parent 71d3d5c393
commit 8b7abf5dd4
9 changed files with 316 additions and 199 deletions
@@ -0,0 +1,93 @@
+import { FC, useEffect, 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 ServiceSection from '../../../components/ServiceSection'
+import { Link } from 'react-router-dom'
+import Button from '../../../components/Button'
+import { ArrowLeft } from 'iconsax-react'
+import { Pages } from '../../../config/Pages'
+
+const OtherServicesComponent: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [categoryId, setCategoryId] = useState<string>('')
+    const getCategory = useGetCategoriesPublic()
+    const getServices = useGetServicesByCategory(categoryId)
+
+    useEffect(() => {
+
+        if (getCategory.data) {
+            setCategoryId(getCategory?.data?.data?.categories[0]?.id)
+        }
+
+    }, [getCategory.data])
+
+    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'
+                >
+                    {
+                        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 w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                    {
+                        getServices.data?.data?.category?.danakService?.map((item: ItemServiceType) => {
+                            return (
+                                <div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
+                                    <div className='flex justify-between items-center'>
+                                        <ServiceSection
+                                            item={item}
+                                        />
+                                        <Link to={Pages.services.detail + item.id}>
+                                            <Button
+                                                className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                            >
+                                                <div className='flex gap-2'>
+                                                    <div>{t('service.buy')}</div>
+                                                    <ArrowLeft color='black' size={16} />
+                                                </div>
+                                            </Button>
+                                        </Link>
+                                    </div>
+
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default OtherServicesComponent