links and other responive

This commit is contained in:
hamid zarghami
2025-01-11 16:13:45 +03:30
parent 0da02d2f03
commit bccad50666
14 changed files with 202 additions and 167 deletions
+57 -45
View File
@@ -1,6 +1,8 @@
import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Pages } from '../config/Pages'
import { Link } from 'react-router-dom'
const Footer: FC = () => {
@@ -10,56 +12,66 @@ const Footer: FC = () => {
<div className='xl:hidden'>
<div className='h-[60px] '></div>
<div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Home2
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.home')}
</div>
</div>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Element4
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.other_services')}
</div>
</div>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className='bg-white p-1 rounded-full -mt-7'>
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
<Element3
className='size-5'
color='white'
/>
<Link to={Pages.dashboard}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Home2
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.home')}
</div>
</div>
<div className='text-[10px] '>
{t('footer.my_services')}
</Link>
<Link to={Pages.services.other}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Element4
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.other_services')}
</div>
</div>
</div>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<NotificationStatus
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.announcements')}
</Link>
<Link to={Pages.services.mine}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<div className='bg-white p-1 rounded-full -mt-7'>
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
<Element3
className='size-5'
color='white'
/>
</div>
</div>
<div className='text-[10px] '>
{t('footer.my_services')}
</div>
</div>
</div>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Messages3
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.tickets')}
</Link>
<Link to={Pages.announcement.list}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<NotificationStatus
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.announcements')}
</div>
</div>
</div>
</Link>
<Link to={Pages.ticket.list}>
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
<Messages3
className='size-5'
color='#8C90A3'
/>
<div className='text-[10px]'>
{t('footer.tickets')}
</div>
</div>
</Link>
</div>
</div>
)