quik acess
This commit is contained in:
hamid zarghami
+121
-90
@@ -1,4 +1,4 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, Fragment } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ArrowLeft, Element3, Messages3, NotificationStatus, Receipt21 } from 'iconsax-react'
|
||||
import ItemDashboard from './components/ItemDashboard'
|
||||
@@ -10,110 +10,141 @@ import { Carousel } from "@material-tailwind/react";
|
||||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||||
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetQuikAccess } from './hooks/useHomeData'
|
||||
import { QuikAccessItemType } from './types/HomeTypes'
|
||||
import ServiceItem from '../../components/ServiceItem'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
|
||||
|
||||
const Home: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const getAds = useGetAds(AdsDisplayLocation.HOMEPAGE_TOP)
|
||||
const getQuikAccess = useGetQuikAccess()
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
{
|
||||
getAds.data?.data?.ads?.map((item: AdsItemType) => {
|
||||
return (
|
||||
<div key={item.id} className='relative drtl'>
|
||||
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
{
|
||||
<a href={item.link}>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
<ArrowLeft size={14} color='white' />
|
||||
<Fragment>
|
||||
{
|
||||
getAds.isPending || getQuikAccess.isPending ?
|
||||
<div className='mt-5'>
|
||||
<PageLoading />
|
||||
</div>
|
||||
:
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
{
|
||||
getAds.data?.data?.ads?.map((item: AdsItemType) => {
|
||||
return (
|
||||
<div key={item.id} className='relative drtl'>
|
||||
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</a>
|
||||
}
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
{
|
||||
<a href={item.link}>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
<ArrowLeft size={14} color='white' />
|
||||
</button>
|
||||
</a>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Carousel>
|
||||
|
||||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||||
<ItemDashboard
|
||||
title={t('home.myservice')}
|
||||
icon={<Element3 size={20} color='black' />}
|
||||
color='#00D16C'
|
||||
count={4}
|
||||
description={t('home.active_service')}
|
||||
link={Pages.services.mine}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.ticket')}
|
||||
icon={<Messages3 size={20} color='black' />}
|
||||
color='#FF7B00'
|
||||
count={4}
|
||||
description={t('home.unread_messages')}
|
||||
link={Pages.ticket.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('receip.receip')}
|
||||
icon={<Receipt21 size={20} color='black' />}
|
||||
color='#0047FF'
|
||||
count={4}
|
||||
description={t('home.receip')}
|
||||
link={Pages.receipts.index}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.announcement')}
|
||||
icon={<NotificationStatus size={20} color='black' />}
|
||||
color='#FF0000'
|
||||
count={4}
|
||||
description={t('home.unread_announcement')}
|
||||
link={Pages.announcement.list}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-8'>
|
||||
<TitleLine title={t('home.access')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex flex-wrap gap-6 items-stretch'>
|
||||
{
|
||||
getQuikAccess?.data?.data?.quickAccesses?.length === 0 &&
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] min-h-[152px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<img src={AccessbilityImage} className='w-10' />
|
||||
<div className='text-xs'>
|
||||
{t('home.add_access')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Carousel>
|
||||
}
|
||||
{
|
||||
getQuikAccess.data?.data?.quickAccesses?.map((item: QuikAccessItemType) => {
|
||||
return (
|
||||
<ServiceItem
|
||||
key={item.service.id}
|
||||
item={item.service}
|
||||
className='flex-1 min-w-[40%] xl:!min-w-[20%] xl:p-6 p-4 flex flex-col'
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
{Array.from({ length: 4 - (getQuikAccess.data?.data?.quickAccesses?.length || 1) }).map((_, index) => (
|
||||
<BoxNewAccessbility key={index} />
|
||||
))}
|
||||
|
||||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||||
<ItemDashboard
|
||||
title={t('home.myservice')}
|
||||
icon={<Element3 size={20} color='black' />}
|
||||
color='#00D16C'
|
||||
count={4}
|
||||
description={t('home.active_service')}
|
||||
link={Pages.services.mine}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.ticket')}
|
||||
icon={<Messages3 size={20} color='black' />}
|
||||
color='#FF7B00'
|
||||
count={4}
|
||||
description={t('home.unread_messages')}
|
||||
link={Pages.ticket.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('receip.receip')}
|
||||
icon={<Receipt21 size={20} color='black' />}
|
||||
color='#0047FF'
|
||||
count={4}
|
||||
description={t('home.receip')}
|
||||
link={Pages.receipts.index}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
title={t('home.announcement')}
|
||||
icon={<NotificationStatus size={20} color='black' />}
|
||||
color='#FF0000'
|
||||
count={4}
|
||||
description={t('home.unread_announcement')}
|
||||
link={Pages.announcement.list}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-8'>
|
||||
<TitleLine title={t('home.access')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex flex-wrap gap-6 items-center'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<img src={AccessbilityImage} className='w-10' />
|
||||
<div className='text-xs'>
|
||||
{t('home.add_access')}
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] xl:p-6 p-4'></div>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] xl:p-6 p-4'></div>
|
||||
</div>
|
||||
</div>
|
||||
<DanakLearning />
|
||||
</div>
|
||||
<BoxNewAccessbility />
|
||||
<BoxNewAccessbility />
|
||||
<BoxNewAccessbility />
|
||||
</div>
|
||||
</div>
|
||||
<DanakLearning />
|
||||
</div>
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user