122 lines
4.1 KiB
TypeScript
122 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import {
|
|
ExternalLinkIcon,
|
|
ImageIcon,
|
|
LayoutDashboardIcon,
|
|
BookOpenIcon,
|
|
ClipboardListIcon,
|
|
LogOutIcon,
|
|
PlusIcon,
|
|
UserPlusIcon,
|
|
} from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { authClient } from "@/lib/auth/client";
|
|
|
|
export function AdminHeader() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
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-wrap items-center gap-2 px-4 py-2 sm:px-6">
|
|
<Link
|
|
href="/admin"
|
|
className="mr-auto flex min-h-11 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="Admin navigation" className="flex items-center gap-1">
|
|
<Button
|
|
variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin/activity" />}
|
|
>
|
|
<ClipboardListIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">Activity</span>
|
|
</Button>
|
|
<Button
|
|
variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin/glossary" />}
|
|
>
|
|
<BookOpenIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">Glossary</span>
|
|
</Button>
|
|
<Button
|
|
variant={pathname === "/admin/register" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin/register" />}
|
|
>
|
|
<UserPlusIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">Accounts</span>
|
|
</Button>
|
|
<Button
|
|
variant={pathname === "/admin" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin" />}
|
|
>
|
|
<LayoutDashboardIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">Dashboard</span>
|
|
</Button>
|
|
<Button
|
|
variant={pathname === "/admin/create" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin/create" />}
|
|
>
|
|
<PlusIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">New Guide</span>
|
|
</Button>
|
|
<Button
|
|
variant={
|
|
pathname.startsWith("/admin/image") ? "secondary" : "ghost"
|
|
}
|
|
size="sm"
|
|
nativeButton={false}
|
|
render={<Link href="/admin/image/overview" />}
|
|
>
|
|
<ImageIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">Image Generator</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
nativeButton={false}
|
|
render={<Link href="/" target="_blank" />}
|
|
aria-label="เปิดหน้าเว็บไซต์"
|
|
>
|
|
<ExternalLinkIcon />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label="ออกจากระบบ"
|
|
onClick={() =>
|
|
authClient.signOut({
|
|
fetchOptions: {
|
|
onSuccess: () => {
|
|
router.push("/admin/login");
|
|
router.refresh();
|
|
},
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<LogOutIcon />
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|