feat: add CopyableCode component

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

@@ -1,21 +1,19 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
 import {
   Card,
-  Code,
   Flex,
   IconButton,
   Text,
   TextField,
-  Tooltip,
 } from "@radix-ui/themes";
 import { Html } from "@react-three/drei";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { radToDeg } from "three/src/math/MathUtils.js";
 import { resolveArmorIndex } from "../../../core/blitzkit/resolveArmorIndex";
-import { 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";
 
@@ -23,8 +21,6 @@ export function ArmorPlateDisplay() {
   const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const input = useRef<HTMLInputElement>(null);
-  const { strings } = useLocale();
-  const [copied, setCopied] = useState(false);
 
   if (highlightArmor === undefined) return null;
 
@@ -65,24 +61,9 @@ export function ArmorPlateDisplay() {
               <>
                 <Text mt="2" color="gray" size="2">
                   <b>DEV:</b>{" "}
-                  <Tooltip
+                  <CopyableCode copy={highlightArmor.name}>
-                    open={copied}
+                    {highlightArmor.name}
-                    content={strings.website.common.copy_button.copied}
+                  </CopyableCode>
-                  >
-                    <Code
-                      variant="soft"
-                      highContrast
-                      color="gray"
-                      style={{ cursor: "copy" }}
-                      onClick={() => {
-                        navigator.clipboard.writeText(highlightArmor.name);
-                        setCopied(true);
-                      }}
-                      onPointerLeave={() => setCopied(false)}
-                    >
-                      {highlightArmor.name}
-                    </Code>
-                  </Tooltip>
                 </Text>
               </>
             )}

packages/website/src/components/CopyableCode.tsx

@@ -0,0 +1,32 @@
+import { Code, Tooltip } from "@radix-ui/themes";
+import { useState, type ReactNode } from "react";
+import { useLocale } from "../hooks/useLocale";
+
+interface CopyableCodeProps {
+  copy?: string;
+  children: ReactNode;
+}
+
+export function CopyableCode({ copy, children }: CopyableCodeProps) {
+  const [copied, setCopied] = useState(false);
+  const { strings } = useLocale();
+
+  return (
+    <Tooltip open={copied} content={strings.website.common.copy_button.copied}>
+      <Code
+        variant="soft"
+        highContrast
+        color="gray"
+        style={{ cursor: copy ? "copy" : "default" }}
+        onClick={() => {
+          if (!copy) return;
+          navigator.clipboard.writeText(copy);
+          setCopied(true);
+        }}
+        onPointerLeave={() => setCopied(false)}
+      >
+        {children}
+      </Code>
+    </Tooltip>
+  );
+}

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -4,13 +4,13 @@ import {
   TankType,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import { Box, Code, Flex, Tooltip } from '@radix-ui/themes';
+import { Box, Flex } from '@radix-ui/themes';
-import { useState } from 'react';
 import { Var } from '../../../core/radix/var';
 import { useLocale } from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 import { Duel } from '../../../stores/duel';
 import { classIcons } from '../../ClassIcon';
+import { CopyableCode } from '../../CopyableCode';
 import { Listing } from './components/Listing';
 
 const NATIONAL_BANNER_POSITION_OVERRIDES: Record<string, string> = {
@@ -24,7 +24,6 @@ export function MetaSection() {
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const ClassIcon = classIcons[protagonist.class];
   const { locale, strings } = useLocale();
-  const [copied, setCopied] = useState<null | 'id' | 'name'>(null);
 
   return (
     <Flex justify="center" mt="-9">
@@ -103,53 +102,18 @@ export function MetaSection() {
                     <Listing
                       label={strings.website.tools.tankopedia.meta.dev_id}
                     >
-                      <Tooltip
+                      <CopyableCode copy={`${protagonist.id}`}>
-                        open={copied === 'id'}
+                        {protagonist.id}
-                        content={strings.website.common.copy_button.copied}
+                      </CopyableCode>
-                      >
-                        <Code
-                          variant="soft"
-                          highContrast
-                          color="gray"
-                          style={{ cursor: 'copy' }}
-                          onClick={() => {
-                            navigator.clipboard.writeText(`${protagonist.id}`);
-                            setCopied('id');
-                          }}
-                          onPointerLeave={() => {
-                            if (copied === 'id') setCopied(null);
-                          }}
-                        >
-                          {protagonist.id}
-                        </Code>
-                      </Tooltip>
                     </Listing>
                   )}
                   {developerMode && (
                     <Listing
                       label={strings.website.tools.tankopedia.meta.dev_name}
                     >
-                      <Tooltip
+                      <CopyableCode copy={protagonist.dev_name}>
-                        open={copied === 'name'}
+                        {protagonist.dev_name ?? '-'}
-                        content={strings.website.common.copy_button.copied}
+                      </CopyableCode>
-                      >
-                        <Code
-                          variant="soft"
-                          highContrast
-                          color="gray"
-                          style={{ cursor: 'copy' }}
-                          onClick={() => {
-                            if (!protagonist.dev_name) return;
-                            navigator.clipboard.writeText(protagonist.dev_name);
-                            setCopied('name');
-                          }}
-                          onPointerLeave={() => {
-                            if (copied === 'name') setCopied(null);
-                          }}
-                        >
-                          {protagonist.dev_name ?? '-'}
-                        </Code>
-                      </Tooltip>
                     </Listing>
                   )}
                   {protagonist.type === TankType.PREMIUM && (