pixel perfect

src/pages/service/components/OtherServices.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useState } from 'react'
 import TitleLine from '../../../components/TitleLine'
 import { useTranslation } from 'react-i18next'
 import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useServiceData'
@@ -18,19 +18,6 @@ const OtherServicesComponent: FC = () => {
     const getCategory = useGetCategoriesPublic()
     const getServices = useGetServicesByCategory(categoryId)
 
-
-    useEffect(() => {
-
-        if (getCategory.data) {
-            setCategoryId(getCategory?.data?.data?.categories[0]?.id)
-        }
-
-    }, [getCategory.data])
-
-    console.log('services', getServices.data?.data?.category?.danakServices
-    );
-
-
     return (
         <div>
             <div className='w-full mt-8'>
@@ -43,6 +30,14 @@ const OtherServicesComponent: FC = () => {
                     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 (
@@ -65,7 +60,7 @@ const OtherServicesComponent: FC = () => {
             <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?.danakServices?.map((item: ItemServiceType) => {
+                        getServices.data?.data?.services?.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 gap-2 justify-between items-center'>
@@ -77,7 +72,7 @@ const OtherServicesComponent: FC = () => {
                                                 className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                                             >
                                                 <div className='flex gap-2'>
-                                                    <div className='whitespace-nowrap'>{t('service.detail')}</div>
+                                                    <div className='whitespace-nowrap'>{t('service.buy')}</div>
                                                     <ArrowLeft color='black' size={16} />
                                                 </div>
                                             </Button>