fix : dedupe code

2026-10-10 00:38:23 +07:00
parent 7ba513c2bb
commit d145f8ecba
3 changed files with 115 additions and 116 deletions
@@ -1,6 +1,5 @@
 "use client";

-import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -15,101 +14,85 @@ import {
 } from "lucide-react";

 import { Button } from "@/components/ui/button";
-import { PublicAccountMenu } from "@/components/public/public-account-menu";
-import { NotificationBell } from "@/components/notifications/notification-bell";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { HeaderShell } from "@/components/header-shell";

 export function AdminHeader() {
  const pathname = usePathname();

-  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="/admin"
-          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"
+  return (
+    <HeaderShell homeHref="/admin" homeLabel="หน้าแอดมิน ไกด์เกนชินไม่ใช่เกมมือถือ">
+      <nav aria-label="เมนูแอดมิน" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto sm:justify-end">
+        <Button variant={pathname.startsWith("/admin/comments") ? "secondary" : "ghost"} size="sm" nativeButton={false}
+          render={<Link href="/admin/comments" prefetch={false} />} aria-label="ความคิดเห็น">
+          <MessageSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">ความคิดเห็น</span>
+        </Button>
+        <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
+          size="sm" nativeButton={false} render={<Link href="/admin/commission" />} aria-label="Commission">
+          <MessagesSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">Commission</span>
+        </Button>
+        <Button
+          variant={pathname === "/admin/stygian" ? "secondary" : "ghost"}
+          size="sm"
+          nativeButton={false}
+          render={<Link href="/admin/stygian" />}
+          aria-label="Stygian"
        >
-          <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
-          <span className="hidden lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
-        </Link>
-        <nav aria-label="เมนูแอดมิน" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto sm:justify-end">
-          <Button variant={pathname.startsWith("/admin/comments") ? "secondary" : "ghost"} size="sm" nativeButton={false}
-            render={<Link href="/admin/comments" prefetch={false} />} aria-label="ความคิดเห็น">
-            <MessageSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">ความคิดเห็น</span>
-          </Button>
-          <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
-            size="sm" nativeButton={false} render={<Link href="/admin/commission" />} aria-label="Commission">
-            <MessagesSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">Commission</span>
-          </Button>
-          <Button
-            variant={pathname === "/admin/stygian" ? "secondary" : "ghost"}
-            size="sm"
-            nativeButton={false}
-            render={<Link href="/admin/stygian" />}
-            aria-label="Stygian"
-          >
-            <SwordsIcon data-icon="inline-start" />
-            <span className="hidden xl:inline">Stygian</span>
-          </Button>
-          <Button
-            variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
-            size="sm"
-            nativeButton={false}
-            render={<Link href="/admin/activity" />}
-            aria-label="ประวัติการแก้ไข"
-          >
-            <ClipboardListIcon data-icon="inline-start" />
-            <span className="hidden xl:inline">Logs</span>
-          </Button>
-          <Button
-            variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
-            size="sm"
-            nativeButton={false}
-            render={<Link href="/admin/glossary" />}
-            aria-label="glossary"
-          >
-            <BookOpenIcon data-icon="inline-start" />
-            <span className="hidden xl:inline">Glossary</span>
-          </Button>
-          <Button
-            variant={
-              pathname.startsWith("/admin/image") ? "secondary" : "ghost"
-            }
-            size="sm"
-            nativeButton={false}
-            render={<Link href="/admin/image/overview" />}
-            aria-label="ส่งออกภาพ"
-          >
-            <ImageIcon data-icon="inline-start" />
-            <span className="hidden xl:inline">Image Gen</span>
-          </Button>
-          <Button
-            variant={pathname === "/admin" ? "secondary" : "ghost"}
-            size="sm"
-            nativeButton={false}
-            render={<Link href="/admin" />}
-            aria-label="ภาพรวม"
-          >
-            <LayoutDashboardIcon data-icon="inline-start" />
-            <span className="hidden xl:inline">Dashboard</span>
-          </Button>
+          <SwordsIcon data-icon="inline-start" />
+          <span className="hidden xl:inline">Stygian</span>
+        </Button>
+        <Button
+          variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
+          size="sm"
+          nativeButton={false}
+          render={<Link href="/admin/activity" />}
+          aria-label="ประวัติการแก้ไข"
+        >
+          <ClipboardListIcon data-icon="inline-start" />
+          <span className="hidden xl:inline">Logs</span>
+        </Button>
+        <Button
+          variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
+          size="sm"
+          nativeButton={false}
+          render={<Link href="/admin/glossary" />}
+          aria-label="glossary"
+        >
+          <BookOpenIcon data-icon="inline-start" />
+          <span className="hidden xl:inline">Glossary</span>
+        </Button>
+        <Button
+          variant={
+            pathname.startsWith("/admin/image") ? "secondary" : "ghost"
+          }
+          size="sm"
+          nativeButton={false}
+          render={<Link href="/admin/image/overview" />}
+          aria-label="ส่งออกภาพ"
+        >
+          <ImageIcon data-icon="inline-start" />
+          <span className="hidden xl:inline">Image Gen</span>
+        </Button>
+        <Button
+          variant={pathname === "/admin" ? "secondary" : "ghost"}
+          size="sm"
+          nativeButton={false}
+          render={<Link href="/admin" />}
+          aria-label="ภาพรวม"
+        >
+          <LayoutDashboardIcon data-icon="inline-start" />
+          <span className="hidden xl:inline">Dashboard</span>
+        </Button>

-          <Button
-            variant="ghost"
-            size="icon-sm"
-            nativeButton={false}
-            render={<Link href="/" />}
-            aria-label="เปิดหน้าเว็บไซต์"
-          >
-            <ExternalLinkIcon />
-          </Button>
-        </nav>
-        <ThemeSwitcher />
-        <NotificationBell />
-        <PublicAccountMenu />
-      </div>
-    </header>
-    </>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          nativeButton={false}
+          render={<Link href="/" />}
+          aria-label="เปิดหน้าเว็บไซต์"
+        >
+          <ExternalLinkIcon />
+        </Button>
+      </nav>
+    </HeaderShell>
  );
 }
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+import Image from "@/components/ui/resilient-image";
+import { PublicAccountMenu } from "@/components/public/public-account-menu";
+import { NotificationBell } from "@/components/notifications/notification-bell";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+
+export function HeaderShell({ homeHref, homeLabel, children }: {
+  homeHref: string;
+  homeLabel: string;
+  children: ReactNode;
+}) {
+  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={homeHref}
+          aria-label={homeLabel}
+          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 lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+        </Link>
+        {children}
+        <ThemeSwitcher />
+        <NotificationBell />
+        <PublicAccountMenu />
+      </div>
+    </header>
+  );
+}
@@ -1,4 +1,3 @@
-import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 import { Suspense } from "react";
 import { PencilIcon } from "lucide-react";
@@ -6,9 +5,7 @@ import { PencilIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { VisitorPresence } from "@/components/public/visitor-presence";
 import { PublicNavigation } from "@/components/public/public-navigation";
-import { PublicAccountMenu } from "@/components/public/public-account-menu";
-import { NotificationBell } from "@/components/notifications/notification-bell";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { HeaderShell } from "@/components/header-shell";
 import { getAdminSession } from "@/lib/auth/server";
 import { HttpError } from "@/lib/security/http";

@@ -30,27 +27,14 @@ async function AdminEditLink({ editHref }: { editHref: string }) {

 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 lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
-        </Link>
-        <PublicNavigation />
-        <div className="hidden lg:block">
-          <VisitorPresence guideId={guideId} />
-        </div>
-        <Suspense fallback={null}>
-          <AdminEditLink editHref={editHref} />
-        </Suspense>
-        <ThemeSwitcher />
-        <NotificationBell />
-        <PublicAccountMenu />
+    <HeaderShell homeHref="/" homeLabel="หน้าแรก ไกด์เกนชินไม่ใช่เกมมือถือ">
+      <PublicNavigation />
+      <div className="hidden lg:block">
+        <VisitorPresence guideId={guideId} />
      </div>
-    </header>
+      <Suspense fallback={null}>
+        <AdminEditLink editHref={editHref} />
+      </Suspense>
+    </HeaderShell>
  );
 }