Translate strings that were not using i18n yet

Only English and Spanish translations have been included.

website/public/locales/en/leaderboard.json

@@ -10,5 +10,9 @@
   "weekly": "Weekly",
   "prompt": "Prompts",
   "reply": "Replies",
-  "label": "Labels"
+  "label": "Labels",
+  "view_all": "View all",
+  "top_5_contributors_today": "Top 5 Contributors Today",
+  "previous": "Previous",
+  "next": "Next"
 }

website/public/locales/en/message.json

@@ -10,5 +10,7 @@
   "report_title": "Report",
   "send_report": "Send",
   "submit_labels": "Submit",
-  "view_user": "View user"
+  "view_user": "View user",
+  "recent_messages": "Recent Messages",
+  "your_recent_messages": "Your Recent Messages"
 }

website/public/locales/en/side_menu.json

@@ -0,0 +1,14 @@
+{
+  "dashboard": "Dashboard",
+  "dashboard_home": "Dashboard Home",
+  "messages": "Messages",
+  "messages_dashboard": "Messages Dashboard",
+  "leaderboard": "Leaderboard",
+  "user_leaderboard": "User Leaderboard",
+  "users": "Users",
+  "users_dashboard": "Users Dashboard",
+  "status": "Status",
+  "status_dashboard": "Status Dashboard",
+  "dark_mode": "Dark Mode",
+  "ligth_mode": "Ligth Mode"
+}

website/public/locales/es/leaderboard.json

@@ -10,5 +10,9 @@
   "weekly": "Semanal",
   "prompt": "Indicaciones",
   "reply": "Respuestas",
-  "label": "Etiquetas"
+  "label": "Etiquetas",
+  "view_all": "Ver todos",
+  "top_5_contributors_today": "5 mayores contribuidores hoy",
+  "previous": "Anterior",
+  "next": "Siguiente"
 }

website/public/locales/es/message.json

@@ -10,5 +10,7 @@
   "report_title": "Informe",
   "send_report": "Enviar",
   "submit_labels": "Enviar",
-  "view_user": "Ver usuario"
+  "view_user": "Ver usuario",
+  "recent_messages": "Mensajes recientes",
+  "your_recent_messages": "Tus mensajes recientes"
 }

website/public/locales/es/side_menu.json

@@ -0,0 +1,14 @@
+{
+  "dashboard": "Panel principal",
+  "dashboard_home": "Panel principal",
+  "messages": "Mensajes",
+  "messages_dashboard": "Tablón de mensajes",
+  "leaderboard": "Clasificaciones",
+  "user_leaderboard": "Clasificación de usuarios",
+  "users": "Usuarios",
+  "users_dashboard": "Tablón de usuarios",
+  "status": "Estado",
+  "status_dashboard": "Tablón de estado",
+  "dark_mode": "Modo oscuro",
+  "ligth_mode": "Modo claro"
+}

website/src/components/Dashboard/LeaderboardWidget.tsx

@@ -1,17 +1,19 @@
 import { Card, CardBody, Link, Text } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import NextLink from "next/link";
 import { LeaderboardTable } from "src/components/LeaderboardTable";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 export function LeaderboardWidget() {
+  const { t } = useTranslation(["leaderboard"]);
   return (
     <main className="h-fit col-span-3">
       <div className="flex flex-col gap-4">
         <div className="flex items-end justify-between">
-          <Text className="text-2xl font-bold">Top 5 Contributors Today</Text>
+          <Text className="text-2xl font-bold">{t("top_5_contributors_today")}</Text>
           <Link as={NextLink} href="/leaderboard" _hover={{ textDecoration: "none" }}>
             <Text color="blue.400" className="text-sm font-bold">
-              View All -&gt;
+              {t("view_all")} -&gt;
             </Text>
           </Link>
         </div>

website/src/components/Dashboard/SlimFooter.tsx

@@ -1,9 +1,11 @@
 import { Box, Divider } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import Image from "next/image";
 import Link from "next/link";
 import { useMemo } from "react";
 
 export function SlimFooter() {
+  const { t } = useTranslation();
   return (
     <footer>
       <Box>
@@ -16,11 +18,11 @@ export function SlimFooter() {
           </Box>
           <nav>
             <Box display="flex" gap="5" fontSize="xs" color="blue.500">
-              <FooterLink href="/privacy-policy" label="Privacy Policy" />
-              <FooterLink href="/terms-of-service" label="Terms of Service" />
-              <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-              <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
-              <FooterLink href="https://projects.laion.ai/Open-Assistant/" label="Docs" />
+              <FooterLink href="/privacy-policy" label={t("privacy_policy")} />
+              <FooterLink href="/terms-of-service" label={t("terms_of_service")} />
+              <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label={t("github")} />
+              <FooterLink href="https://ykilcher.com/open-assistant-discord" label={t("discord")} />
+              <FooterLink href="https://projects.laion.ai/Open-Assistant/" label={t("docs")} />
             </Box>
           </nav>
         </Box>

website/src/components/DataTable.tsx

@@ -22,6 +22,7 @@ import {
   Tr,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Filter } from "lucide-react";
 import { ChangeEvent, ReactNode } from "react";
@@ -62,6 +63,7 @@ export const DataTable = <T,>({
   disablePrevious,
   disablePagination,
 }: DataTableProps<T>) => {
+  const { t } = useTranslation("leaderboard");
   const { getHeaderGroups, getRowModel } = useReactTable<T>({
     data,
     columns,
@@ -83,11 +85,11 @@ export const DataTable = <T,>({
       {!disablePagination && (
         <Flex mb="2">
           <Button onClick={onPreviousClick} disabled={disablePrevious}>
-            Previous
+            {t("previous")}
           </Button>
           <Spacer />
           <Button onClick={onNextClick} disabled={disableNext}>
-            Next
+            {t("next")}
           </Button>
         </Flex>
       )}

website/src/components/SideMenu.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import { LucideIcon, Sun } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -16,6 +17,7 @@ export interface SideMenuProps {
 export function SideMenu(props: SideMenuProps) {
   const router = useRouter();
   const { colorMode, toggleColorMode } = useColorMode();
+  const { t } = useTranslation(["side_menu"]);
 
   return (
     <main className="sticky top-0 sm:h-full">
@@ -60,7 +62,7 @@ export function SideMenu(props: SideMenuProps) {
             <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
               <Sun size={"1em"} />
               <Text fontWeight="normal" className="hidden lg:block">
-                {colorMode === "light" ? "Dark Mode" : "Light Mode"}
+                {colorMode === "light" ? t("dark_mode") : t("ligth_mode")}
               </Text>
             </Button>
           </Tooltip>

website/src/pages/messages/index.tsx

@@ -1,5 +1,6 @@
 import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { useTranslation } from "next-i18next";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { get } from "src/lib/api";
@@ -7,6 +8,7 @@ import useSWRImmutable from "swr/immutable";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const MessagesDashboard = () => {
+  const { t } = useTranslation(["message"]);
   const boxBgColor = useColorModeValue("white", "gray.800");
   const boxAccentColor = useColorModeValue("gray.200", "gray.900");
 
@@ -22,7 +24,7 @@ const MessagesDashboard = () => {
       <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Recent Messages
+            {t("recent_messages")}
           </Text>
           <Box
             backgroundColor={boxBgColor}
@@ -36,7 +38,7 @@ const MessagesDashboard = () => {
         </Box>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Your Recent Messages
+            {t("your_recent_messages")}
           </Text>
           <Box
             backgroundColor={boxBgColor}

website/types/i18next.d.ts

@@ -5,6 +5,7 @@ import type leaderboard from "public/locales/en/leaderboard.json";
 import type message from "public/locales/en/message.json";
 import type labelling from "public/locales/en/labelling.json";
 import type tasks from "public/locales/en/tasks.json";
+import type side_menu from "public/locales/en/side_menu.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {
@@ -16,6 +17,7 @@ declare module "i18next" {
       tasks: typeof tasks;
       message: typeof message;
       labelling: typeof labelling;
+      side_menu: typeof side_menu;
     };
   }
 }