structure

2025-05-11 11:34:09 +03:30
commit 6cb45848ce
275 changed files with 37875 additions and 0 deletions
@@ -0,0 +1,103 @@
+import { FC, useEffect, useState } 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, useLocation } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import Notifications from '../pages/notification/Notification'
+import { useSharedStore } from './store/sharedStore'
+import { useGetProfile } from '../pages/profile/hooks/useProfileData'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { removeRefreshToken, removeToken } from '../config/func'
+
+const Header: FC = () => {
+
+    const location = useLocation();
+    const [popoverKey, setPopoverKey] = useState(0);
+    const { t } = useTranslation('global')
+    const { setOpenSidebar, openSidebar } = useSharedStore()
+    const { data } = useGetProfile()
+
+    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 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] 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