hamid zarghami
59 lines
3.1 KiB
TypeScript
59 lines
3.1 KiB
TypeScript
import { FC } from 'react'
|
||
import MenuItem from './MenuItem'
|
||
import { Button } from '@/components/ui/button'
|
||
import { LogoutCurve } from 'iconsax-react'
|
||
|
||
type Props = {
|
||
pageActive: 'profile' | 'favorite' | 'comments' | 'chat' | 'orders'
|
||
}
|
||
|
||
const Menu: FC<Props> = (props) => {
|
||
const { pageActive } = props
|
||
|
||
return (
|
||
<div className='bg-[#FAFAFA] rounded-[10px] border border-border'>
|
||
{/* Mobile Layout */}
|
||
<div className='block sm:hidden'>
|
||
<div className='flex overflow-x-auto scrollbar-hide p-3'>
|
||
<div className='flex gap-2 min-w-max'>
|
||
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
|
||
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
|
||
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
|
||
{/* <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} /> */}
|
||
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
|
||
|
||
{/* Logout Button in Mobile */}
|
||
<div className='flex-shrink-0 ml-2'>
|
||
<Button className='bg-[#F2F2F2] h-12 px-3'>
|
||
<div className='flex items-center gap-2 text-[#AD3434]'>
|
||
<LogoutCurve className='size-4' color='#AD3434' />
|
||
<div className='text-xs font-light'>خروج</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Desktop Layout */}
|
||
<div className='hidden sm:flex h-20 justify-between items-center px-6 lg:px-10'>
|
||
<div className='flex gap-4 lg:gap-6 xl:gap-10'>
|
||
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
|
||
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
|
||
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
|
||
{/* <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} /> */}
|
||
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
|
||
</div>
|
||
|
||
<Button className='bg-[#F2F2F2] h-12'>
|
||
<div className='flex items-center gap-2 text-[#AD3434]'>
|
||
<LogoutCurve className='size-5' color='#AD3434' />
|
||
<div className='text-sm font-light'>خروج از حساب</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Menu |