fix: use code

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -1,13 +1,20 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
-import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes";
+import {
+  Card,
+  Code,
+  Flex,
+  IconButton,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { Html } from "@react-three/drei";
 import { useRef } from "react";
 import { radToDeg } from "three/src/math/MathUtils.js";
 import { resolveArmorIndex } from "../../../core/blitzkit/resolveArmorIndex";
+import { LocaleProvider, useLocale } from "../../../hooks/useLocale";
 import { App } from "../../../stores/app";
 import { Duel } from "../../../stores/duel";
 import { Tankopedia } from "../../../stores/tankopedia";
-import { CopyableCode } from "../../CopyableCode";
 import { layerTypeNames } from "./ShotDisplayCard";
 import { ArmorType } from "./SpacedArmorScene";
 
@@ -15,6 +22,7 @@ export function ArmorPlateDisplay() {
   const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const input = useRef<HTMLInputElement>(null);
+  const { locale } = useLocale();
 
   if (highlightArmor === undefined) return null;
 
@@ -24,6 +32,7 @@ export function ArmorPlateDisplay() {
         center
         style={{ pointerEvents: highlightArmor.editingPlate ? "auto" : "none" }}
       >
+        <LocaleProvider locale={locale}>
           <Card
             variant="classic"
             mb="4"
@@ -55,14 +64,9 @@ export function ArmorPlateDisplay() {
                 <>
                   <Text mt="2" color="gray" size="2">
                     <b>DEV:</b>{" "}
-                  <CopyableCode
+                    <Code variant="soft" highContrast color="gray">
-                    copy={highlightArmor.name}
-                    variant="soft"
-                    highContrast
-                    color="gray"
-                  >
                       {highlightArmor.name}
-                  </CopyableCode>
+                    </Code>
                   </Text>
                 </>
               )}
@@ -102,7 +106,9 @@ export function ArmorPlateDisplay() {
 
                           if (highlightArmor.name.startsWith("hull_")) {
                             tank.armor!.thickness[index] = thickness;
-                        } else if (highlightArmor.name.startsWith("turret_")) {
+                          } else if (
+                            highlightArmor.name.startsWith("turret_")
+                          ) {
                             turret.armor!.thickness[index] = thickness;
                           } else if (highlightArmor.name.startsWith("gun_")) {
                             if (highlightArmor.name.includes("_armor_")) {
@@ -110,7 +116,9 @@ export function ArmorPlateDisplay() {
                             } else {
                               gun.thickness = thickness;
                             }
-                        } else if (highlightArmor.name.startsWith("chassis_")) {
+                          } else if (
+                            highlightArmor.name.startsWith("chassis_")
+                          ) {
                             track.thickness = thickness;
                           }
                         });
@@ -150,7 +158,8 @@ export function ArmorPlateDisplay() {
                         const initialTurret =
                           initialTank.turrets[protagonist.turret.id];
                         const gun = turret.guns[protagonist.gun.id];
-                      const initialGun = initialTurret.guns[protagonist.gun.id];
+                        const initialGun =
+                          initialTurret.guns[protagonist.gun.id];
                         const track = tank.tracks[protagonist.track.id];
                         const initialTrack =
                           initialTank.tracks[protagonist.track.id];
@@ -180,6 +189,7 @@ export function ArmorPlateDisplay() {
               )}
             </Flex>
           </Card>
+        </LocaleProvider>
       </Html>
     </group>
   );