feat : improve preview for export dialog

components/public/structured-guide.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import localFont from "next/font/local";
 import Link from "next/link";
 import { ArrowLeftIcon, ArrowUpRightIcon } from "lucide-react";
 import type { ReactNode } from "react";
@@ -64,6 +65,11 @@ import {
 import { publicGuideSections } from "@/lib/guides/public-sections";
 import { cn } from "@/lib/utils";
 
+const kanitSemiBold = localFont({
+  src: "../../public/Kanit-SemiBold.ttf",
+  weight: "600",
+});
+
 export function publicSections(guide: PublicGuide) {
   return publicGuideSections(guide);
 }
@@ -252,6 +258,7 @@ function GuideOverview({
                 showLanguageSelector={false}
                 localizeFileName={false}
                 captureClassName="p-0"
+                modeSelection="direct"
               >
                 <MaterialPoster
                   character={guide.character}
@@ -416,7 +423,7 @@ function WeaponSectionContent({
       ) : null}
       <header className="relative z-10 flex items-center justify-center text-center">
         <div className="flex flex-col items-center gap-3">
-          <p className="text-sm font-medium text-primary">
+          <p className={cn("text-sm font-medium text-primary", exporting && "drop-shadow-[0_3px_2px_rgba(0,0,0,0.9)]")}>
             อาวุธที่แนะนำ
           </p>
           <div className="flex items-center justify-center gap-3">
@@ -432,7 +439,7 @@ function WeaponSectionContent({
                   "drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]",
               )}
             />
-            <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
+            <h1 className={cn("whitespace-nowrap font-heading text-4xl font-semibold", exporting && "drop-shadow-[0_3px_2px_rgba(0,0,0,0.9)]")}>
               Weapons
             </h1>
           </div>
@@ -649,7 +656,7 @@ function ArtifactSectionContent({
   const recommendedConditions = profile?.recommendedConditions ?? [];
   const recommendedCards = recommendedConditions.map((condition, conditionIndex) => (
     <div key={conditionIndex} data-artifact-export-section="best-stats" data-recommended-condition={conditionIndex} className="flex flex-col gap-5">
-      {exporting && recommendedConditions.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
+      {exporting && recommendedConditions.length > 1 ? <p className="text-center text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
       {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
       {profile ? (
         <Card data-artifact-export-section="best-stats" className="artifact-export-main-stats overflow-hidden pt-0">
@@ -706,7 +713,7 @@ function ArtifactSectionContent({
   return (
     <section
       className={cn(
-        "flex flex-col gap-6",
+        "artifact-export-root flex flex-col gap-6",
         exporting &&
           "relative isolate overflow-hidden bg-[#070b20] p-10 text-white",
       )}
@@ -716,9 +723,9 @@ function ArtifactSectionContent({
           backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
         />
       ) : null}
-      <header className="relative z-10 flex items-center justify-center text-center">
+      <header className={cn("relative z-10 flex items-center justify-center text-center", exporting && kanitSemiBold.className)}>
         <div className="flex flex-col items-center gap-3">
-          <p className="text-sm font-medium text-primary">
+          <p className={cn("text-sm font-medium text-primary", exporting && "drop-shadow-[0_3px_2px_rgba(0,0,0,0.9)]")}>
             อาร์ติแฟกต์และสแตทที่แนะนำ
           </p>
           <div className="flex items-center justify-center gap-3">
@@ -734,7 +741,7 @@ function ArtifactSectionContent({
                   "drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]",
               )}
             />
-            <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
+            <h1 className={cn("whitespace-nowrap text-4xl font-semibold", !exporting && "font-heading", exporting && "drop-shadow-[0_3px_2px_rgba(0,0,0,0.9)]")}>
               Artifacts & Stats
             </h1>
           </div>