hamid zarghami
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { Home2, DocumentText, NotificationStatus, People, Element3 } from 'iconsax-react'
|
|
import { type FC } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Pages } from '../config/Pages'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
const Footer: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
|
|
return (
|
|
<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'>
|
|
<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>
|
|
</Link>
|
|
<Link to={Pages.customers.list}>
|
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
|
<People
|
|
className='size-5'
|
|
color='#8C90A3'
|
|
/>
|
|
<div className='text-[10px]'>
|
|
{t('footer.customers')}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link to={Pages.foods.list}>
|
|
<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.foods')}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link to={Pages.announcements.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>
|
|
</Link>
|
|
|
|
<Link to={Pages.orders.list}>
|
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
|
<DocumentText
|
|
className='size-5'
|
|
color='#8C90A3'
|
|
/>
|
|
<div className='text-[10px]'>
|
|
{t('footer.orders')}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Footer |