92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
|
import {
|
|
ArrowRightStartOnRectangleIcon,
|
|
UserIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { ChevronDownIcon } from '@heroicons/react/24/solid'
|
|
import { Link, useFetcher, useRouteLoaderData } from 'react-router'
|
|
|
|
import { ProfileIcon } from '~/components/icons/profile'
|
|
import { Button } from '~/components/ui/button'
|
|
import { APP } from '~/configs/meta'
|
|
import { useAdminContext } from '~/contexts/admin'
|
|
import type { loader } from '~/routes/_admin.lg-admin'
|
|
|
|
export const Navbar = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
|
|
const { staffData } = loaderData || {}
|
|
const fetcher = useFetcher()
|
|
const { setEditProfile } = 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">
|
|
<Popover className="relative">
|
|
<PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
|
|
<div className="flex items-center space-x-3">
|
|
{staffData?.profile_picture ? (
|
|
<img
|
|
src={staffData?.profile_picture}
|
|
alt={staffData?.name}
|
|
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
|
|
/>
|
|
) : (
|
|
<ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
|
|
)}
|
|
|
|
<span className="text-sm">{staffData?.name}</span>
|
|
</div>
|
|
<ChevronDownIcon className="size-4 opacity-50" />
|
|
</PopoverButton>
|
|
<PopoverPanel
|
|
anchor={{ to: 'bottom', gap: '8px' }}
|
|
transition
|
|
className="flex w-3xs flex-col divide-y divide-black/5 rounded-xl border border-[#ECECEC] bg-white transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
|
|
>
|
|
<div className="p-2">
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full justify-start rounded p-1 px-3 text-base font-bold"
|
|
onClick={() => {
|
|
setEditProfile(true)
|
|
}}
|
|
>
|
|
<UserIcon className="size-5" />
|
|
<span>Profile</span>
|
|
</Button>
|
|
</div>
|
|
<div className="p-2">
|
|
<fetcher.Form
|
|
method="POST"
|
|
action="/actions/admin/logout"
|
|
className="grid"
|
|
>
|
|
<Button
|
|
disabled={fetcher.state !== 'idle'}
|
|
isLoading={fetcher.state !== 'idle'}
|
|
type="submit"
|
|
className="w-full justify-start rounded p-1 px-3 text-base font-bold"
|
|
variant="secondary"
|
|
icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
|
|
>
|
|
<span>Logout</span>
|
|
</Button>
|
|
</fetcher.Form>
|
|
</div>
|
|
</PopoverPanel>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|