learning
This commit is contained in:
hamid zarghami
+61
-105
@@ -1,121 +1,77 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import BannerImage from '../../assets/images/banner.png'
|
||||
import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import LearningImage from '../../assets/images/learning.png'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { useGetLearning } from './hooks/useLearningData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Td from '../../components/Td'
|
||||
import { LearningItemType } from './types/LearningTypes'
|
||||
|
||||
const LearningList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const getLearning = useGetLearning()
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
<div className='flex-1'>
|
||||
<div className='mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('learning.learning')}
|
||||
{t('learning.list_learning')}
|
||||
</div>
|
||||
|
||||
<div className='xl:mt-8 mt-4 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'
|
||||
/>
|
||||
</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='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
|
||||
<div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<img src={LearningImage} className='w-full rounded-[20px]' />
|
||||
<div className='mt-4'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs text-description mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 text-xs text-description'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<img src={LearningImage} className='w-full rounded-[20px]' />
|
||||
<div className='mt-4'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs text-description mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 text-xs text-description'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<img src={LearningImage} className='w-full rounded-[20px]' />
|
||||
<div className='mt-4'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs text-description mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 text-xs text-description'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<img src={LearningImage} className='w-full rounded-[20px]' />
|
||||
<div className='mt-4'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='flex gap-1 text-xs text-description mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 text-xs text-description'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='min-w-[30%] flex-1 px-4'></div>
|
||||
<div className='min-w-[30%] flex-1 px-4'></div>
|
||||
</div>
|
||||
<div className='h-14 xl:hidden'></div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white w-sidebar hidden xl:block h-fit rounded-3xl overflow-hidden relative'>
|
||||
<img
|
||||
src={BannerImage}
|
||||
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'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div>
|
||||
<Link to={Pages.learning.create}>
|
||||
<Button
|
||||
className='px-5'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('learning.submit_learning')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getLearning.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text='' />
|
||||
<Td text={t('learning.title')} />
|
||||
<Td text={t('learning.category')} />
|
||||
<Td text={t('learning.video_duration')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getLearning.data?.data?.learnings?.map((item: LearningItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={''}>
|
||||
<img src={item.coverUrl} className='w-20' />
|
||||
</Td>
|
||||
<Td text={item.title} />
|
||||
<Td text={item.category?.name} />
|
||||
<Td text={item.videoDuration} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user