62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import { type FC } from 'react'
|
|
import Input from '@/components/Input'
|
|
import UserAvatar from '@/components/UserAvatar'
|
|
import { HambergerMenu } from 'iconsax-react'
|
|
import { Link } from 'react-router-dom'
|
|
import Notifications from '@/pages/notification/Notification'
|
|
import { useSharedStore } from './store/useSharedStore'
|
|
import { t } from '@/locale'
|
|
import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
|
|
import { Paths } from '@/config/Paths'
|
|
|
|
const Header: FC = () => {
|
|
|
|
const { setOpenSidebar, openSidebar } = useSharedStore()
|
|
const { data } = useGetAdminMe()
|
|
const admin = data?.data
|
|
|
|
const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
|
|
const roleTitle = admin?.role?.title || admin?.role?.name || ''
|
|
|
|
return (
|
|
<div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>
|
|
|
|
<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>
|
|
<div className='flex xl:gap-6 gap-4 items-center'>
|
|
<Notifications />
|
|
{admin && (
|
|
<Link to={Paths.profile} className='flex gap-2 items-center mt-2.5'>
|
|
<UserAvatar
|
|
src={admin.avatarUrl}
|
|
firstName={admin.firstName}
|
|
lastName={admin.lastName}
|
|
className='size-6'
|
|
textClassName='text-xs'
|
|
/>
|
|
<div className='xl:flex hidden flex-col items-start'>
|
|
<div className='text-xs'>
|
|
{displayName || String(admin.phone ?? '')}
|
|
</div>
|
|
{roleTitle && (
|
|
<div className='text-[10px] text-description'>
|
|
{roleTitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header
|