danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

call back and service item skeleton

Browse Source
This commit is contained in:
hamid zarghami
2025-02-27 09:12:27 +03:30
parent 550d825e3a
commit e8c26de5e1
11 changed files with 164 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/service/MyServices.tsx
+34 -31
View File
@@ -10,6 +10,7 @@ import { MyServicesItem } from './types/ServiecTypes'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
import { Helmet } from 'react-helmet-async'
import ServiceItemSkeleton from './components/ServiceItemSkeleton'
const MyServices: FC = () => {
@@ -53,40 +54,42 @@ const MyServices: FC = () => {
</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'
getServices.isPending ?
Array.from({ length: 4 }).map((_, index) => <ServiceItemSkeleton key={index} />)
:
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='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
<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>
)
})
</Link>
)
})
}
src/pages/service/components/ServiceItemSkeleton.tsx
+13
View File
@@ -0,0 +1,13 @@
import { FC } from 'react'
import Skeleton from 'react-loading-skeleton'
const ServiceItemSkeleton: FC = () => {
return (
<Skeleton
containerClassName='flex-1 min-w-[40%] xl:min-w-[20%]'
className='min-h-[128px] !rounded-3xl '
/>
)
}
export default ServiceItemSkeleton