37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
|
import { useJWTPayload } from "~/hooks/use-jwt-payload";
|
||
|
|
import { useGetUserById } from "~/services/profile/get-by-id";
|
||
|
|
import type { NavItem } from "~/types/constants/nav-item";
|
||
|
|
import { MobileSidebar } from "./mobile-sidebar";
|
||
|
|
import { UserNav } from "./user-nav";
|
||
|
|
|
||
|
|
type HeaderProps = {
|
||
|
|
navItems: NavItem[];
|
||
|
|
profileHref: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Header({ navItems, profileHref }: HeaderProps) {
|
||
|
|
const { jwtPayload } = useJWTPayload();
|
||
|
|
const { data } = useGetUserById(jwtPayload.id);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="z-50 w-full bg-white shadow-sm">
|
||
|
|
<nav className="flex items-center justify-between px-4 py-2.5 md:justify-end">
|
||
|
|
<div className="lg:!hidden flex flex-1 items-center gap-2">
|
||
|
|
<MobileSidebar navItems={navItems} />
|
||
|
|
<img src="/img/icon.png" alt="Logo" className="w-40" />
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<span className="hidden font-medium text-sm md:block">
|
||
|
|
Halo, <span className="uppercase">{data?.nama}</span>
|
||
|
|
</span>
|
||
|
|
<UserNav
|
||
|
|
profileHref={profileHref}
|
||
|
|
username={data?.nama || ""}
|
||
|
|
phone={data?.no_hp || ""}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|