feat: translate tier list

packages/website/src/components/CopyButton.tsx

@@ -1,5 +1,6 @@
 import { Button, type ButtonProps, Tooltip } from '@radix-ui/themes';
 import { useState } from 'react';
+import { useLocale } from '../hooks/useLocale';
 
 interface CopyButtonProps extends ButtonProps {
   copy: () => string | undefined;
@@ -7,9 +8,13 @@ interface CopyButtonProps extends ButtonProps {
 
 export function CopyButton({ copy, ...props }: CopyButtonProps) {
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const { strings } = useLocale();
 
   return (
-    <Tooltip open={tooltipOpen} content="Copied!">
+    <Tooltip
+      open={tooltipOpen}
+      content={strings.website.common.copy_button.copied}
+    >
       <Button
         {...props}
         onClick={() => {

packages/website/src/components/TierList/Controls/components/Share.tsx

@@ -1,10 +1,12 @@
 import { Share2Icon } from '@radix-ui/react-icons';
 import { generateTierListParams } from '../../../../core/blitzkit/generateTierListParams';
+import { useLocale } from '../../../../hooks/useLocale';
 import { TierList } from '../../../../stores/tierList';
 import { CopyButton } from '../../../CopyButton';
 
 export function Share() {
   const rows = TierList.use((state) => state.rows);
+  const { strings } = useLocale();
 
   return (
     <CopyButton
@@ -13,7 +15,7 @@ export function Share() {
         `${location.origin}/tools/tier-list?${generateTierListParams(rows)}`
       }
     >
-      <Share2Icon /> Share
+      <Share2Icon /> {strings.website.tools.tier_list.buttons.share}
     </CopyButton>
   );
 }

packages/website/src/components/TierList/Controls/index.tsx

@@ -1,10 +1,12 @@
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { Button, Flex } from '@radix-ui/themes';
+import { useLocale } from '../../../hooks/useLocale';
 import { TierList, tierListInitialState } from '../../../stores/tierList';
 import { Share } from './components/Share';
 
 export function TierListControls() {
   const mutateTierList = TierList.useMutation();
+  const { strings } = useLocale();
 
   return (
     <Flex justify="center" gap="2">
@@ -16,7 +18,7 @@ export function TierListControls() {
           });
         }}
       >
-        <ReloadIcon /> Reset
+        <ReloadIcon /> {strings.website.tools.tier_list.buttons.reset}
       </Button>
 
       <Share />

packages/website/src/pages/[...locale]/tools/tier-list/_index.tsx

@@ -4,16 +4,22 @@ import { TierListControls } from '../../../../components/TierList/Controls';
 import { TierListTable } from '../../../../components/TierList/Table';
 import { TierListTiles } from '../../../../components/TierList/Tiles';
 import { URLManager } from '../../../../components/TierList/URLManager';
+import {
+  LocaleProvider,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
 import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
 import { TierList } from '../../../../stores/tierList';
 
-export function Page() {
+export function Page({ locale }: LocaleAcceptorProps) {
   return (
-    <TierList.Provider>
-      <TankopediaPersistent.Provider>
-        <Content />
-      </TankopediaPersistent.Provider>
-    </TierList.Provider>
+    <LocaleProvider locale={locale}>
+      <TierList.Provider>
+        <TankopediaPersistent.Provider>
+          <Content />
+        </TankopediaPersistent.Provider>
+      </TierList.Provider>
+    </LocaleProvider>
   );
 }
 

packages/website/src/pages/[...locale]/tools/tier-list/index.astro

@@ -4,8 +4,10 @@ import ToolLayout from '../../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <ToolLayout tool={tierListTool}>
-  <Page client:load />
+  <Page {locale} client:load />
 </ToolLayout>