39 lines
1.1 KiB
TypeScript

import { Link } from 'react-router'
import { ChevronIcon } from '~/components/icons/chevron'
import { NotificationIcon } from '~/components/icons/notification'
import { APP } from '~/configs/meta'
import { useAdminContext } from '~/contexts/admin'
export const Navbar = () => {
const { adminProfile } = useAdminContext()
return (
<div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
<Link
to="/"
className="h-full"
>
<img
src={APP.logo}
alt={APP.title}
className="h-3/4 w-auto sm:h-full"
/>
</Link>
<div className="flex items-center gap-x-8">
<div className="flex w-3xs items-center justify-between">
<div className="flex items-center">
<div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
<span className="text-xs">{adminProfile.name}</span>
</div>
<ChevronIcon className="opacity-50" />
</div>
<NotificationIcon
className="text-[#B0C3CC]"
showBadge={true}
/>
</div>
</div>
)
}