85 lines
4.0 KiB
TypeScript
85 lines
4.0 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Suspense } from "react";
|
|
import { MenuIcon } from "lucide-react";
|
|
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
|
|
import { VisitorPresence } from "@/components/public/visitor-presence";
|
|
import { getAdminSession } from "@/lib/auth/server";
|
|
|
|
async function AdminEditLink({ editHref, mobile = false }: { editHref: string; mobile?: boolean }) {
|
|
const isAdmin = Boolean(await getAdminSession());
|
|
|
|
return isAdmin ? (
|
|
mobile ? (
|
|
<SheetClose
|
|
render={<Link href={editHref} className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}
|
|
>
|
|
ไปหน้าแก้ไข
|
|
</SheetClose>
|
|
) : (
|
|
<Button variant="ghost" size="sm" nativeButton={false} render={<Link href={editHref} />}>
|
|
ไปหน้าแก้ไข
|
|
</Button>
|
|
)
|
|
) : null;
|
|
}
|
|
|
|
export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string; guideId?: string } = {}) {
|
|
return (
|
|
<header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
|
|
<div className="mx-auto flex min-h-16 w-full max-w-7xl flex-nowrap items-center gap-2 px-4 py-2 sm:px-6">
|
|
<Link
|
|
href="/"
|
|
aria-label="หน้าแรก ไกด์เกนชินไม่ใช่เกมมือถือ"
|
|
className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
|
|
<span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
|
|
</Link>
|
|
<nav aria-label="Public navigation" className="hidden items-center gap-1 lg:flex">
|
|
<Button variant="ghost" size="sm" nativeButton={false} render={<Link href="/commission" />}>
|
|
<Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
|
|
Commission
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/stygian" />}
|
|
>
|
|
<Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
|
|
Stygian Guide
|
|
</Button>
|
|
<Suspense fallback={null}>
|
|
<AdminEditLink editHref={editHref} />
|
|
</Suspense>
|
|
</nav>
|
|
<VisitorPresence guideId={guideId} />
|
|
<Sheet>
|
|
<SheetTrigger render={<Button variant="ghost" size="icon" className="lg:hidden" aria-label="เปิดเมนู" />}>
|
|
<MenuIcon />
|
|
</SheetTrigger>
|
|
<SheetContent side="right">
|
|
<SheetHeader><SheetTitle>เมนู</SheetTitle></SheetHeader>
|
|
<nav aria-label="Public mobile navigation" className="flex flex-col gap-1 px-3">
|
|
<SheetClose render={<Link href="/commission" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
|
|
<Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
|
|
Commission
|
|
</SheetClose>
|
|
<SheetClose render={<Link href="/stygian" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
|
|
<Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
|
|
Stygian Guide
|
|
</SheetClose>
|
|
<Suspense fallback={null}>
|
|
<AdminEditLink editHref={editHref} mobile />
|
|
</Suspense>
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|