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

components/public/constellation-image.tsx

@@ -1,13 +1,16 @@
+"use client";
+
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text";
 import Image from "next/image";
 
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { constellationChartRows } from "@/lib/guides/export-image";
-import { exportText } from "@/lib/guides/export-text";
 import { cn } from "@/lib/utils";
 
-function percentage(value: number): string {
-  return `${value.toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+function percentage(value: number, locale: string): string {
+  return `${value.toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
 }
 
 export function ConstellationImage({
@@ -17,6 +20,7 @@ export function ConstellationImage({
   guide: PublicGuide;
   group: PublicGuide["constellationGroups"][number];
 }) {
+  const { e, locale } = useTranslation();
   const rows = constellationChartRows(group.rows);
   const background = guide.character.splashImageUrl ?? guide.coverUrl;
   const footer = group.note;
@@ -43,10 +47,10 @@ export function ConstellationImage({
                 : "text-[76px]",
             )}
           >
-            {exportText("constellationTitle", { name: guide.character.name })}
+            {e("constellationTitle", { name: guide.character.name })}
           </h2>
             <p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
-              {exportText("teamDamage")}
+              {e("teamDamage")}
             </p>
         </div>
       </div>
@@ -59,7 +63,7 @@ export function ConstellationImage({
             className="grid grid-cols-[82px_1fr] items-center gap-4"
           >
             <div className="text-right text-[58px] leading-none font-bold drop-shadow-[0_5px_4px_rgba(0,0,0,0.9)]">
-              C{row.level}
+              <Text message="C" />{row.level}
             </div>
             <div className="flex h-[100px] items-center">
               <div
@@ -75,7 +79,7 @@ export function ConstellationImage({
                   row.isGreat ? "text-[#f0c76a]" : "text-[#f1badd]",
                 )}
               >
-                {percentage(row.percent)}
+                {percentage(row.percent, locale)}
               </span>
             </div>
           </div>