Translate strings that were not using i18n yet

Only English and Spanish translations have been included.

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>