hamid zarghami
99 lines
5.1 KiB
TypeScript
99 lines
5.1 KiB
TypeScript
import { type FC } from 'react'
|
|
import Input from '../components/Input'
|
|
// import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
|
|
// import AvatarImage from '../assets/images/avatar_image.png'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Link } from 'react-router-dom'
|
|
import { Pages } from '../config/Pages'
|
|
import { useSharedStore } from './store/sharedStore'
|
|
import { HambergerMenu, Wallet } from 'iconsax-react'
|
|
|
|
const Header: FC = () => {
|
|
|
|
// const location = useLocation();
|
|
// const [popoverKey, setPopoverKey] = useState(0);
|
|
const { t } = useTranslation('global')
|
|
const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
|
|
|
|
// useEffect(() => {
|
|
// setPopoverKey((prevKey) => prevKey + 1);
|
|
// }, [location.pathname]);
|
|
|
|
// const handleLogout = () => {
|
|
// removeToken()
|
|
// removeRefreshToken()
|
|
// window.location.href = Pages.auth.login
|
|
// }
|
|
|
|
return (
|
|
<div className={`fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] ${hasSubMenu ? 'xl:right-[320px] xl:w-[calc(100%-340px)]' : 'xl:right-[285px] xl:w-[calc(100%-305px)]'}`}>
|
|
|
|
<div className='min-w-[270px] hidden xl:block'>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('header.search')}
|
|
/>
|
|
</div>
|
|
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
|
|
<HambergerMenu size={24} color='black' />
|
|
</div>
|
|
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
|
|
<div className='flex xl:gap-6 gap-4 items-center'>
|
|
<Link className='xl:hidden' to={Pages.wallet}>
|
|
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
|
</Link>
|
|
{/* <Notifications /> */}
|
|
{/* {
|
|
data && (
|
|
<Popover className="relative" key={popoverKey}>
|
|
<PopoverButton >
|
|
<div className='flex gap-2 items-center mt-2.5'>
|
|
<div className='size-6 rounded-full bg-description overflow-hidden'>
|
|
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
|
</div>
|
|
<div className='xl:flex hidden gap-1 items-center'>
|
|
<div className='text-xs'>
|
|
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
|
</div>
|
|
<ArrowDown2 size={14} color='#8C90A3' />
|
|
</div>
|
|
</div>
|
|
</PopoverButton>
|
|
|
|
<PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
|
|
<div className='absolute xl:hidden top-6 left-6'>
|
|
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
|
</div>
|
|
<Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
|
<div className='size-14 rounded-full overflow-hidden'>
|
|
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
|
</div>
|
|
|
|
<div>
|
|
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
|
</div>
|
|
|
|
<div className='text-description'>
|
|
{data?.data?.user?.email}
|
|
</div>
|
|
</Link>
|
|
|
|
<div className='px-6 mt-2'>
|
|
<div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
|
|
<Logout size={20} color='black' />
|
|
<div>
|
|
{t('sidebar.logout')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</PopoverPanel>
|
|
</Popover>
|
|
)
|
|
} */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header |