feat(i18n) : add personal languages and compact weapon exports

components/public/artifact-image-export.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 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";
@@ -40,6 +40,7 @@ export function ArtifactImageExport({
   targetConditionLabels: readonly string[];
   recommendedConditionLabels: readonly string[];
 }) {
+  const { e } = useTranslation();
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
   );
@@ -79,13 +80,13 @@ export function ArtifactImageExport({
     <Dialog>
       <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
         <DownloadIcon data-icon="inline-start" />
-        {exportText("exportImage")}
+        {e("exportImage")}
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{exportText("sectionTitle")}</DialogTitle>
+          <DialogTitle>{e("sectionTitle")}</DialogTitle>
           <DialogDescription>
-            {exportText("sectionDescription")}
+            {e("sectionDescription")}
           </DialogDescription>
         </DialogHeader>
         <FieldGroup>
@@ -97,7 +98,7 @@ export function ArtifactImageExport({
                 checked ? new Set(sectionOptions.map(([value]) => value)) : new Set(),
               )}
             />
-            <FieldLabel htmlFor="artifact-export-entire">{exportText("allSections")}</FieldLabel>
+            <FieldLabel htmlFor="artifact-export-entire">{e("allSections")}</FieldLabel>
           </Field>
           {sectionOptions.map(([value, label]) => (
             <Field key={value} orientation="horizontal">
@@ -113,7 +114,7 @@ export function ArtifactImageExport({
                   });
                 }}
               />
-              <FieldLabel htmlFor={`artifact-export-${value}`}>{exportText(label)}</FieldLabel>
+              <FieldLabel htmlFor={`artifact-export-${value}`}>{e(label)}</FieldLabel>
             </Field>
           ))}
           {hasNote ? (
@@ -123,13 +124,13 @@ export function ArtifactImageExport({
                 checked={includeNote}
                 onCheckedChange={(checked) => setIncludeNote(checked === true)}
               />
-              <FieldLabel htmlFor="artifact-export-note">{exportText("addNote")}</FieldLabel>
+              <FieldLabel htmlFor="artifact-export-note">{e("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">{exportText("recommendedCondition")}</p>
+            <p className="text-sm font-medium">{e("recommendedCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[recommendedCondition]}
@@ -143,7 +144,7 @@ export function ArtifactImageExport({
                   value={String(index)}
                   className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                 >
-                  {label}
+                  {label || e("condition", { index: index + 1 })}
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>
@@ -151,7 +152,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">{exportText("targetCondition")}</p>
+            <p className="text-sm font-medium">{e("targetCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[targetCondition]}
@@ -165,7 +166,7 @@ export function ArtifactImageExport({
                   value={String(index)}
                   className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                 >
-                  {label}
+                  {label || e("condition", { index: index + 1 })}
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>