feat(admin-images) : add standalone export generators

app/admin/generate/image/page.tsx

@@ -1,56 +0,0 @@
-import { redirect } from "next/navigation";
-import { connection } from "next/server";
-
-import { AdminHeader } from "@/components/admin/admin-header";
-import { OverviewImageGenerator } from "@/components/admin/overview-image-generator";
-import { getAdminSession } from "@/lib/auth/server";
-import { getActiveCatalog } from "@/lib/guides/queries";
-import { elementOrder } from "@/lib/overview-image";
-
-export default async function OverviewImagePage() {
-  await connection();
-  if (!(await getAdminSession())) redirect("/admin/login");
-
-  const catalog = await getActiveCatalog();
-  if (!catalog) redirect("/admin?sync=required");
-
-  const elementIconUrls = Object.fromEntries(
-    elementOrder.map((element) => [
-      element,
-      catalog.characters.find(
-        (character) =>
-          character.element === element && character.elementIconUrl,
-      )?.elementIconUrl ?? null,
-    ]),
-  );
-
-  return (
-    <div className="min-h-svh">
-      <AdminHeader />
-      <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
-        <header>
-          <p className="text-sm font-medium text-primary">Image generator</p>
-          <h1 className="font-heading text-3xl font-semibold">
-            สร้างภาพ Overview
-          </h1>
-          <p className="mt-2 text-muted-foreground">
-            สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide
-          </p>
-        </header>
-        <OverviewImageGenerator
-          characters={catalog.characters.map((character) => ({
-            key: character.key,
-            name: character.name,
-            aliases: character.aliases,
-            element: character.element,
-            rarity: character.rarity,
-            weaponType: character.weaponType,
-            imageUrl: character.imageUrl,
-            nameCardImageUrl: character.nameCardImageUrl,
-          }))}
-          elementIconUrls={elementIconUrls}
-        />
-      </main>
-    </div>
-  );
-}

app/admin/image/constellation/page.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+
+import { ConstellationImageGenerator } from "@/components/admin/constellation-image-generator";
+import { getActiveCatalog } from "@/lib/guides/queries";
+
+export default async function ConstellationImagePage() {
+  const catalog = await getActiveCatalog();
+  if (!catalog) redirect("/admin?sync=required");
+
+  return (
+    <div className="flex flex-col gap-8">
+      <header>
+        <p className="text-sm font-medium text-primary">Image generator</p>
+        <h1 className="font-heading text-3xl font-semibold">สร้างภาพ Constellation</h1>
+        <p className="mt-2 text-muted-foreground">
+          สร้างกราฟดาเมจ Constellation จาก Catalog โดยไม่บันทึกข้อมูลลง Guide
+        </p>
+      </header>
+      <ConstellationImageGenerator characters={catalog.characters} />
+    </div>
+  );
+}

app/admin/image/layout.tsx

@@ -0,0 +1,23 @@
+import { redirect } from "next/navigation";
+import { connection } from "next/server";
+
+import { AdminHeader } from "@/components/admin/admin-header";
+import { ImageGeneratorNav } from "@/components/admin/image-generator-nav";
+import { getAdminSession } from "@/lib/auth/server";
+
+export default async function ImageGeneratorLayout({
+  children,
+}: LayoutProps<"/admin/image">) {
+  await connection();
+  if (!(await getAdminSession())) redirect("/admin/login");
+
+  return (
+    <div className="min-h-svh">
+      <AdminHeader />
+      <main className="mx-auto flex w-full max-w-[96rem] flex-col gap-6 p-4 sm:p-6 lg:flex-row lg:p-8">
+        <ImageGeneratorNav />
+        <div className="min-w-0 flex-1">{children}</div>
+      </main>
+    </div>
+  );
+}

app/admin/image/overview/page.tsx

@@ -0,0 +1,47 @@
+import { redirect } from "next/navigation";
+
+import { OverviewImageGenerator } from "@/components/admin/overview-image-generator";
+import { getActiveCatalog } from "@/lib/guides/queries";
+import { elementOrder } from "@/lib/overview-image";
+
+export default async function OverviewImagePage() {
+  const catalog = await getActiveCatalog();
+  if (!catalog) redirect("/admin?sync=required");
+
+  const elementIconUrls = Object.fromEntries(
+    elementOrder.map((element) => [
+      element,
+      catalog.characters.find(
+        (character) =>
+          character.element === element && character.elementIconUrl,
+      )?.elementIconUrl ?? null,
+    ]),
+  );
+
+  return (
+    <div className="flex flex-col gap-8">
+      <header>
+        <p className="text-sm font-medium text-primary">Image generator</p>
+        <h1 className="font-heading text-3xl font-semibold">
+          สร้างภาพ Overview
+        </h1>
+        <p className="mt-2 text-muted-foreground">
+          สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide
+        </p>
+      </header>
+      <OverviewImageGenerator
+        characters={catalog.characters.map((character) => ({
+          key: character.key,
+          name: character.name,
+          aliases: character.aliases,
+          element: character.element,
+          rarity: character.rarity,
+          weaponType: character.weaponType,
+          imageUrl: character.imageUrl,
+          nameCardImageUrl: character.nameCardImageUrl,
+        }))}
+        elementIconUrls={elementIconUrls}
+      />
+    </div>
+  );
+}

app/admin/image/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function ImageGeneratorPage() {
+  redirect("/admin/image/overview");
+}

app/admin/image/team/page.tsx

@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+
+import { TeamImageGenerator } from "@/components/admin/team-image-generator";
+import { getActiveCatalog } from "@/lib/guides/queries";
+
+export default async function TeamImagePage() {
+  const catalog = await getActiveCatalog();
+  if (!catalog) redirect("/admin?sync=required");
+
+  return (
+    <div className="flex flex-col gap-8">
+      <header>
+        <p className="text-sm font-medium text-primary">Image generator</p>
+        <h1 className="font-heading text-3xl font-semibold">สร้างภาพ Team Calc</h1>
+        <p className="mt-2 text-muted-foreground">
+          สร้างภาพ Team แบบเดียวกับหน้า Guide โดยไม่บันทึกข้อมูลลง Guide
+        </p>
+      </header>
+      <TeamImageGenerator
+        characters={catalog.characters}
+        weapons={catalog.weapons}
+        artifacts={catalog.artifacts}
+      />
+    </div>
+  );
+}

app/admin/image/weapon/page.tsx

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+
+import { WeaponImageGenerator } from "@/components/admin/weapon-image-generator";
+import { getActiveCatalog } from "@/lib/guides/queries";
+
+export default async function WeaponImagePage() {
+  const catalog = await getActiveCatalog();
+  if (!catalog) redirect("/admin?sync=required");
+
+  return (
+    <div className="flex flex-col gap-8">
+      <header>
+        <p className="text-sm font-medium text-primary">Image generator</p>
+        <h1 className="font-heading text-3xl font-semibold">สร้างภาพ Weapon</h1>
+        <p className="mt-2 text-muted-foreground">
+          สร้างภาพเปรียบเทียบอาวุธจาก Catalog โดยไม่บันทึกข้อมูลลง Guide
+        </p>
+      </header>
+      <WeaponImageGenerator
+        characters={catalog.characters}
+        weapons={catalog.weapons}
+      />
+    </div>
+  );
+}