box services

This commit is contained in:
hamid zarghami
2025-03-04 10:16:47 +03:30
parent 23d19208b9
commit 002e420d85
6 changed files with 85 additions and 78 deletions
+48 -24
View File
@@ -5,11 +5,7 @@ import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useSe
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'
import ServiceItem from '../../../components/ServiceItem'
const OtherServicesComponent: FC = () => {
@@ -62,31 +58,59 @@ const OtherServicesComponent: FC = () => {
{
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 flex-col gap-2 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 className='whitespace-nowrap'>{t('service.buy')}</div>
<ArrowLeft color='black' size={16} />
</div>
</Button>
</Link>
</div>
</div>
<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>
</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 >
)
}