feat: translate embeds

packages/website/src/components/Embeds/Enum.tsx

@@ -1,4 +1,5 @@
 import { Select } from '@radix-ui/themes';
+import { useLocale } from '../../hooks/useLocale';
 import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/tools/embed/[embed]/_index';
 import { EmbedState } from '../../stores/embedState';
 import type {
@@ -13,6 +14,7 @@ export function Enum({
   config: EmbedConfigItemType<EmbedItemType.Enum>;
 }) {
   const mutateEmbedState = EmbedState.useMutation();
+  const { locale } = useLocale();
 
   return (
     <Select.Root
@@ -27,7 +29,7 @@ export function Enum({
       <Select.Content>
         {config.options.map((option) => (
           <Select.Item key={option.value} value={option.value}>
-            {option.label}
+            {option.locales[locale]}
           </Select.Item>
         ))}
       </Select.Content>

packages/website/src/components/Embeds/GenerateURL.tsx

@@ -3,7 +3,6 @@ import {
   type AccountListItem,
   type AccountListWithServer,
 } from '@blitzkit/core';
-import strings from '@blitzkit/i18n/strings/en.json';
 import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
 import {
   Badge,
@@ -19,6 +18,8 @@ import { debounce } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
 import { stringify } from 'urlon';
 import type { embedConfigurations } from '../../constants/embeds';
+import { literals } from '../../core/i18n/literals';
+import { useLocale } from '../../hooks/useLocale';
 import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
 import { CopyButton } from '../CopyButton';
 
@@ -34,6 +35,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
   const input = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(false);
   const [results, setResults] = useState<AccountListWithServer>([]);
+  const { strings } = useLocale();
   const performSearch = useCallback(
     debounce(async () => {
       if (!input.current) return;
@@ -72,20 +74,27 @@ export function GenerateURL({ embed }: GenerateURLProps) {
         <Dialog.Trigger>
           <Button>
             <Link2Icon />
-            Generate URL
+            {strings.website.tools.embed.configuration.export.generate.button}
           </Button>
         </Dialog.Trigger>
 
         <Dialog.Content width="fit-content">
           <Flex direction="column" gap="1">
-            <Heading size="5">Generate URL</Heading>
-            <Text color="gray">Search an account to track</Text>
+            <Heading size="5">
+              {strings.website.tools.embed.configuration.export.generate.title}
+            </Heading>
+            <Text color="gray">
+              {
+                strings.website.tools.embed.configuration.export.generate
+                  .subtitle
+              }
+            </Text>
           </Flex>
 
           <TextField.Root
             mt="4"
             style={{ width: '20rem' }}
-            placeholder="Search players..."
+            placeholder={strings.website.common.player_search.hint}
             ref={input}
             onChange={handleChange}
           >
@@ -98,12 +107,14 @@ export function GenerateURL({ embed }: GenerateURLProps) {
             {searching && (
               <Text color="gray">
                 <Flex align="center" gap="2">
-                  <Spinner /> Searching
+                  <Spinner /> {strings.website.common.player_search.searching}
                 </Flex>
               </Text>
             )}
             {!searching && results.length === 0 && (
-              <Text color="gray">No results</Text>
+              <Text color="gray">
+                {strings.website.common.player_search.no_results}
+              </Text>
             )}
 
             {!searching && results.length > 0 && (
@@ -131,7 +142,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
 
           <Dialog.Close>
             <Button color="red" variant="outline" style={{ width: '100%' }}>
-              Cancel
+              {strings.website.tools.embed.configuration.export.generate.cancel}
             </Button>
           </Dialog.Close>
         </Dialog.Content>
@@ -140,12 +151,18 @@ export function GenerateURL({ embed }: GenerateURLProps) {
       <Dialog.Root open={copyDialogOpen} onOpenChange={setCopyDialogOpen}>
         <Dialog.Content style={{ width: 'fit-content' }}>
           <Flex direction="column" gap="1">
-            <Heading size="5">Copy URL</Heading>
+            <Heading size="5">
+              {
+                strings.website.tools.embed.configuration.export.generate
+                  .success.title
+              }
+            </Heading>
             <Text color="gray">
-              Generated the URL for {copyUser?.nickname}. The embed will start
-              tracking as soon as the URL is pasted. Reset at any time by
-              right-clicking on PC or long-pressing on mobile and then selecting
-              "Reset".
+              {literals(
+                strings.website.tools.embed.configuration.export.generate
+                  .success.info,
+                [`${copyUser?.nickname}`],
+              )}
             </Text>
           </Flex>
 
@@ -158,7 +175,11 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 setSearchDialogOpen(true);
               }}
             >
-              <CaretLeftIcon /> Back
+              <CaretLeftIcon />{' '}
+              {
+                strings.website.tools.embed.configuration.export.generate
+                  .success.back
+              }
             </Button>
             <CopyButton
               style={{ flex: 1 }}
@@ -186,7 +207,11 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 return `${location.origin}/tools/embed/${embed}/host?${searchParams.toString()}`;
               }}
             >
-              <Link2Icon /> Copy URL
+              <Link2Icon />{' '}
+              {
+                strings.website.tools.embed.configuration.export.generate
+                  .success.copy
+              }
             </CopyButton>
           </Flex>
         </Dialog.Content>

packages/website/src/components/Embeds/Import.tsx

@@ -9,6 +9,7 @@ import {
 } from '@radix-ui/themes';
 import { useRef, useState } from 'react';
 import { parse } from 'urlon';
+import { useLocale } from '../../hooks/useLocale';
 import { EmbedState } from '../../stores/embedState';
 
 export function Import() {
@@ -16,12 +17,15 @@ export function Import() {
   const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false);
   const [showConfirmation, setConfirmation] = useState(false);
   const mutateEmbedState = EmbedState.useMutation();
+  const { strings } = useLocale();
 
   return (
     <>
-      <Heading>Import</Heading>
+      <Heading>
+        {strings.website.tools.embed.configuration.import.title}
+      </Heading>
       <Text size="2" color="gray" mb="2">
-        Paste your current URL if you have one already to import your settings
+        {strings.website.tools.embed.configuration.import.description}
       </Text>
 
       <AlertDialog.Root
@@ -29,15 +33,18 @@ export function Import() {
         onOpenChange={setShowInvalidURLPrompt}
       >
         <AlertDialog.Content>
-          <AlertDialog.Title>Invalid URL</AlertDialog.Title>
+          <AlertDialog.Title>
+            {strings.website.tools.embed.configuration.import.idiot_title}
+          </AlertDialog.Title>
           <AlertDialog.Description>
-            Try pasting the URL that BlitzKit previously generated, you silly
-            goose!
+            {strings.website.tools.embed.configuration.import.idiot_description}
           </AlertDialog.Description>
 
           <Flex gap="3" mt="4" justify="end">
             <AlertDialog.Cancel>
-              <Button>Okay, my bad</Button>
+              <Button>
+                {strings.website.tools.embed.configuration.import.idiot_button}
+              </Button>
             </AlertDialog.Cancel>
           </Flex>
         </AlertDialog.Content>
@@ -46,7 +53,7 @@ export function Import() {
       <Flex gap="2" mb="6">
         <TextField.Root
           ref={importInput}
-          placeholder="Paste URL..."
+          placeholder={strings.website.tools.embed.configuration.import.hint}
           style={{ flex: 1 }}
         />
         <Tooltip content="Applied!" open={showConfirmation}>
@@ -72,7 +79,7 @@ export function Import() {
               }
             }}
           >
-            Apply
+            {strings.website.tools.embed.configuration.import.apply}
           </Button>
         </Tooltip>
       </Flex>

packages/website/src/components/Embeds/breakdown.tsx

@@ -8,7 +8,7 @@ import {
   sumCompositeStats,
   type IndividualTankStats,
 } from '@blitzkit/core';
-import strings from '@blitzkit/i18n/strings/en.json';
+import { localizedStrings } from '@blitzkit/i18n';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { ContextMenu } from '@radix-ui/themes';
 import { useEffect, useMemo, useState } from 'react';
@@ -20,8 +20,16 @@ import { useEmbedStateCurry } from '../../stores/embedState/utilities';
 import { BreakdownEmbedCard, BreakdownEmbedWrapper } from '../TanksEmbed';
 
 export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
-  label: strings.common.composite_stats[value],
   value,
+  locales: Object.entries(localizedStrings).reduce(
+    (accumulator, [locale, strings]) => {
+      return {
+        ...accumulator,
+        [locale]: strings.common.composite_stats[value],
+      };
+    },
+    {},
+  ),
 }));
 
 const [tankDefinitions, averageDefinitions] = await Promise.all([