feat(extra) : add catalog items and image export

components/public/structured-guide.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
+import type { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -581,7 +582,7 @@ function ArtifactSectionContent({
   exporting = false,
 }: {
   guide: PublicGuide;
-  action?: React.ReactNode;
+  action?: ReactNode;
   exporting?: boolean;
 }) {
   const profile = guide.artifactProfile;
@@ -1147,12 +1148,34 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
 
 function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
   return (
-    <section className="flex flex-col gap-6">
-      <header className="text-center">
+    <ExtraSectionContent
+      extra={extra}
+      action={
+        <GuideImageExport fileName={`${extra.title}.png`} captureClassName="p-0">
+          <ExtraSectionContent extra={extra} exporting />
+        </GuideImageExport>
+      }
+    />
+  );
+}
+
+function ExtraSectionContent({
+  extra,
+  action,
+  exporting = false,
+}: {
+  extra: PublicGuide["extras"][number];
+  action?: React.ReactNode;
+  exporting?: boolean;
+}) {
+  return (
+    <section className={cn("flex flex-col gap-6", exporting && "bg-background p-10")}>
+      <header className="flex flex-col items-center gap-3 text-center">
         <p className="text-sm font-medium text-primary">คู่มือเสริม</p>
         <h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
+        {action}
       </header>
-      <div className="grid gap-5 md:grid-cols-2">
+      <div className={cn("grid gap-5 md:grid-cols-2", exporting && "grid-cols-2")}>
         {extra.rows.map((row) => (
           <Card
             key={row.id}
@@ -1177,6 +1200,23 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
                 />
               </div>
             ) : null}
+            {row.catalogItems.length ? (
+              <CardContent className="grid grid-cols-2 gap-2 pt-5">
+                {row.catalogItems.map((item) => (
+                  <div key={`${item.kind}:${item.key}`} className="flex min-w-0 items-center gap-2 rounded-lg border bg-background/80 p-2">
+                    {item.imageUrl ? (
+                      <div className={cn("relative size-12 shrink-0 overflow-hidden rounded-md", rarityGradientClass(item.rarity))}>
+                        <Image src={item.imageUrl} alt="" fill className="object-contain" />
+                      </div>
+                    ) : null}
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-medium">{item.name}</p>
+                      {!item.available ? <Badge variant="secondary">ไม่พบรายการ</Badge> : null}
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            ) : null}
             <CardHeader className="pt-5">
               <CardTitle>{row.heading}</CardTitle>
               <CardDescription>