hamid zarghami
115 lines
5.3 KiB
TypeScript
115 lines
5.3 KiB
TypeScript
import { FC, useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Input from '../../components/Input'
|
||
import ServiceSection from '../../components/ServiceSection'
|
||
import StatusCircle from '../../components/StatusCircle'
|
||
import { Link } from 'react-router-dom'
|
||
import { Pages } from '../../config/Pages'
|
||
import { useGetMyServices } from './hooks/useServiceData'
|
||
import { MyServicesItem } from './types/ServiecTypes'
|
||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
|
||
import { Helmet } from 'react-helmet-async'
|
||
|
||
const MyServices: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const [search, setSearch] = useState<string>('')
|
||
const getServices = useGetMyServices(search)
|
||
const getAdsLeft = useGetAds(AdsDisplayLocation.MY_SERVICES_PAGE)
|
||
|
||
return (
|
||
<div className='w-full flex gap-6 mt-4'>
|
||
<Helmet>
|
||
<title>
|
||
داناک | سرویس های من
|
||
</title>
|
||
</Helmet>
|
||
<div className='flex-1'>
|
||
<div>
|
||
{t('service.my_service')}
|
||
</div>
|
||
|
||
<div className='mt-8 flex xl:gap-6 gap-4 items-center'>
|
||
<div className='xl:w-[300px] w-full'>
|
||
<Input
|
||
variant='search'
|
||
placeholder={t('service.search')}
|
||
className='bg-white w-full'
|
||
onChangeSearchFinal={(value) => setSearch(value)}
|
||
/>
|
||
</div>
|
||
|
||
{/* <div>
|
||
<Select
|
||
items={[
|
||
{ label: t('all'), value: 'all' },
|
||
{ label: 'Active', value: 'active' },
|
||
{ label: 'Inactive', value: 'inactive' },
|
||
]}
|
||
className='max-w-[100px]'
|
||
/>
|
||
</div> */}
|
||
</div>
|
||
|
||
<div className='flex items-stretch flex-wrap xl:gap-6 gap-4 xl:items-center mt-8'>
|
||
|
||
{
|
||
getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
|
||
return (
|
||
<Link key={item.id} to={Pages.services.detail + item.id} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||
<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
|
||
}}
|
||
/>
|
||
<div className='mt-6 flex gap-1 items-center'>
|
||
<StatusCircle
|
||
color='#00BA4B'
|
||
/>
|
||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||
</div>
|
||
|
||
</Link>
|
||
)
|
||
})
|
||
}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{
|
||
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
|
||
<a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden sticky top-0'>
|
||
<img
|
||
src={getAdsLeft.data.data.ads[0].imageUrl}
|
||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||
/>
|
||
|
||
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
|
||
<div className='max-w-[80%] text-sm leading-6 text-white'>
|
||
{getAdsLeft.data.data.ads[0].title}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MyServices |