i18n

src/features/tournaments/components/podium.tsx

@@ -2,6 +2,9 @@ import { Stack, Group, Text, ThemeIcon } from "@mantine/core";
 import { CrownIcon, MedalIcon } from "@phosphor-icons/react";
 import { TeamInfo } from "@/features/teams/types";
 import { Tournament } from "../types";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react/macro";
+import type { MessageDescriptor } from "@lingui/core";
 
 interface PodiumProps {
   tournament: Tournament;
@@ -40,7 +43,7 @@ const tierConfig: Record<
   PodiumTier,
   {
     color: string;
-    label: string;
+    label: MessageDescriptor;
     labelColor: string;
     icon: React.ReactNode;
     iconSize: "xl" | "lg";
@@ -50,7 +53,7 @@ const tierConfig: Record<
 > = {
   first: {
     color: "yellow",
-    label: "Champions",
+    label: msg`Champions`,
     labelColor:
       "light-dark(var(--mantine-color-yellow-8), var(--mantine-color-yellow-4))",
     icon: <CrownIcon size={24} />,
@@ -60,7 +63,7 @@ const tierConfig: Record<
   },
   second: {
     color: "gray",
-    label: "2nd place",
+    label: msg`2nd place`,
     labelColor:
       "light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4))",
     icon: <MedalIcon size={20} />,
@@ -70,7 +73,7 @@ const tierConfig: Record<
   },
   third: {
     color: "orange",
-    label: "3rd place",
+    label: msg`3rd place`,
     labelColor:
       "light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-4))",
     icon: <MedalIcon size={18} />,
@@ -81,6 +84,7 @@ const tierConfig: Record<
 };
 
 const PodiumRow = ({ team, tier }: { team: TeamInfo; tier: PodiumTier }) => {
+  const { t } = useLingui();
   const config = tierConfig[tier];
 
   return (
@@ -121,7 +125,7 @@ const PodiumRow = ({ team, tier }: { team: TeamInfo; tier: PodiumTier }) => {
         mt={4}
         mr={4}
       >
-        {config.label}
+        {t(config.label)}
       </Text>
     </Group>
   );