feat : make export image be english text ig

components/public/artifact-image-export.tsx

@@ -3,6 +3,7 @@
 import { useState, type ReactNode } from "react";
 import { DownloadIcon } from "lucide-react";
 
+import { exportText } from "@/lib/guides/export-text";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -18,10 +19,10 @@ import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 const sectionOptions = [
-  ["tierlist", "Artifact Tierlist"],
-  ["best-stats", "Best Main Stats & Substats"],
-  ["target-stats", "Target Stats"],
-  ["talents", "Talent Priority"],
+  ["tierlist", "tierlist"],
+  ["best-stats", "bestStats"],
+  ["target-stats", "targetStats"],
+  ["talents", "talents"],
 ] as const;
 
 type ArtifactExportSection = (typeof sectionOptions)[number][0];
@@ -78,13 +79,13 @@ export function ArtifactImageExport({
     <Dialog>
       <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
         <DownloadIcon data-icon="inline-start" />
-        ส่งออกภาพ
+        {exportText("exportImage")}
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>เลือกข้อมูลสำหรับส่งออก</DialogTitle>
+          <DialogTitle>{exportText("sectionTitle")}</DialogTitle>
           <DialogDescription>
-            เลือกได้หลายส่วน หรือเลือก Entire Section เพื่อส่งออกทั้งหมด
+            {exportText("sectionDescription")}
           </DialogDescription>
         </DialogHeader>
         <FieldGroup>
@@ -96,7 +97,7 @@ export function ArtifactImageExport({
                 checked ? new Set(sectionOptions.map(([value]) => value)) : new Set(),
               )}
             />
-            <FieldLabel htmlFor="artifact-export-entire">Entire Section</FieldLabel>
+            <FieldLabel htmlFor="artifact-export-entire">{exportText("allSections")}</FieldLabel>
           </Field>
           {sectionOptions.map(([value, label]) => (
             <Field key={value} orientation="horizontal">
@@ -112,7 +113,7 @@ export function ArtifactImageExport({
                   });
                 }}
               />
-              <FieldLabel htmlFor={`artifact-export-${value}`}>{label}</FieldLabel>
+              <FieldLabel htmlFor={`artifact-export-${value}`}>{exportText(label)}</FieldLabel>
             </Field>
           ))}
           {hasNote ? (
@@ -122,13 +123,13 @@ export function ArtifactImageExport({
                 checked={includeNote}
                 onCheckedChange={(checked) => setIncludeNote(checked === true)}
               />
-              <FieldLabel htmlFor="artifact-export-note">Add Note</FieldLabel>
+              <FieldLabel htmlFor="artifact-export-note">{exportText("addNote")}</FieldLabel>
             </Field>
           ) : null}
         </FieldGroup>
         {sections.has("best-stats") && recommendedConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">Recommended Stats condition</p>
+            <p className="text-sm font-medium">{exportText("recommendedCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[recommendedCondition]}
@@ -150,7 +151,7 @@ export function ArtifactImageExport({
         ) : null}
         {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">Target Stats condition</p>
+            <p className="text-sm font-medium">{exportText("targetCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[targetCondition]}