i18n

src/features/players/components/players-activity-table.tsx

@@ -8,6 +8,7 @@ import {
   Divider,
   UnstyledButton,
 } from "@mantine/core";
+import { Trans, Plural, useLingui } from "@lingui/react/macro";
 import { Player } from "../types";
 import { usePlayersActivity } from "../queries";
 
@@ -16,18 +17,20 @@ interface PlayerActivityItemProps {
 }
 
 const PlayerActivityItem = memo(({ player }: PlayerActivityItemProps) => {
+  const { t, i18n } = useLingui();
+
   const playerName = player.first_name && player.last_name
     ? `${player.first_name} ${player.last_name}`
-    : player.first_name || player.last_name || "Unknown Player";
+    : player.first_name || player.last_name || t`Unknown Player`;
 
   const formatDate = (dateStr?: string) => {
-    if (!dateStr) return "Never";
+    if (!dateStr) return t`Never`;
     const date = new Date(dateStr);
-    return date.toLocaleString();
+    return date.toLocaleString(i18n.locale);
   };
 
   const getTimeSince = (dateStr?: string) => {
-    if (!dateStr) return "Never active";
+    if (!dateStr) return t`Never active`;
     const date = new Date(dateStr);
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
@@ -35,10 +38,10 @@ const PlayerActivityItem = memo(({ player }: PlayerActivityItemProps) => {
     const diffHours = Math.floor(diffMins / 60);
     const diffDays = Math.floor(diffHours / 24);
 
-    if (diffMins < 1) return "Just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 30) return `${diffDays}d ago`;
+    if (diffMins < 1) return t`Just now`;
+    if (diffMins < 60) return t`${diffMins}m ago`;
+    if (diffHours < 24) return t`${diffHours}h ago`;
+    if (diffDays < 30) return t`${diffDays}d ago`;
     return formatDate(dateStr);
   };
 
@@ -94,7 +97,7 @@ export const PlayersActivityTable = () => {
       <Stack gap="xs">
         <Group px="md" justify="space-between" align="center">
           <Text size="10px" lh={0} c="dimmed">
-            {players.length} players
+            <Plural value={players.length} one="# player" other="# players" />
           </Text>
         </Group>
 
@@ -109,7 +112,7 @@ export const PlayersActivityTable = () => {
 
         {players.length === 0 && (
           <Text ta="center" c="dimmed" py="xl">
-            No player activity found
+            <Trans>No player activity found</Trans>
           </Text>
         )}
       </Stack>