Merge pull request #852 from rjmacarthy/chore/apply-i18n-pages

website: Add localization to pages, header and footer

website/src/components/Footer.tsx

@@ -1,9 +1,11 @@
 import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";
 import { useMemo } from "react";
 
 export function Footer() {
+  const { t } = useTranslation();
   const { colorMode } = useColorMode();
   const backgroundColor = colorMode === "light" ? "white" : "gray.800";
   const textColor = colorMode === "light" ? "black" : "gray.300";
@@ -33,10 +35,10 @@ export function Footer() {
 
             <Box>
               <Text fontSize="md" fontWeight="bold">
-                Open Assistant
+                {t("title")}
               </Text>
               <Text fontSize="sm" color="gray.500">
-                Conversational AI for everyone.
+                {t("conversational")}
               </Text>
             </Box>
           </Flex>
@@ -45,23 +47,23 @@ export function Footer() {
             <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} fontSize="sm">
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Legal
+                  {t("legal")}
                 </Text>
-                <FooterLink href="/privacy-policy" label="Privacy Policy" />
-                <FooterLink href="/terms-of-service" label="Terms of Service" />
+                <FooterLink href="/privacy-policy" label={t("privacy_policy")} />
+                <FooterLink href="/terms-of-service" label={t("terms_of_service")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Connect
+                  {t("connect")}
                 </Text>
-                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-                <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label={t("github")} />
+                <FooterLink href="https://ykilcher.com/open-assistant-discord" label={t("discord")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  About
+                  {t("about")}
                 </Text>
-                <FooterLink href="https://projects.laion.ai/Open-Assistant" label="Docs" />
+                <FooterLink href="https://projects.laion.ai/Open-Assistant" label={t("docs")} />
               </Flex>
             </Box>
           </nav>

website/src/components/Header/Header.tsx

@@ -1,7 +1,8 @@
-import { Box, Button, Text, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
 
@@ -23,7 +24,8 @@ function AccountButton() {
   );
 }
 
-export function Header(props) {
+export function Header() {
+  const { t } = useTranslation();
   const { data: session } = useSession();
   const homeURL = session ? "/dashboard" : "/";
 
@@ -34,7 +36,7 @@ export function Header(props) {
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
             <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
-              Open Assistant
+              {t("title")}
             </Text>
           </Flex>
         </Link>

website/src/components/Header/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
@@ -25,6 +26,7 @@ interface MenuOption {
 }
 
 export function UserMenu() {
+  const { t } = useTranslation();
   const borderColor = useColorModeValue("gray.300", "gray.600");
   const handleSignOut = useCallback(() => {
     signOut({ callbackUrl: "/" });
@@ -36,23 +38,23 @@ export function UserMenu() {
   }
   const options: MenuOption[] = [
     {
-      name: "Dashboard",
+      name: t("dashboard"),
       href: "/dashboard",
-      desc: "Dashboard",
+      desc: t("dashboard"),
       icon: FiLayout,
       isExternal: false,
     },
     {
-      name: "Account Settings",
+      name: t("account_settings"),
       href: "/account",
-      desc: "Account Settings",
+      desc: t("account_settings"),
       icon: FiSettings,
       isExternal: false,
     },
     {
-      name: "Report a Bug",
+      name: t("report_a_bug"),
       href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
-      desc: "Report a Bug",
+      desc: t("report_a_bug"),
       icon: FiAlertTriangle,
       isExternal: true,
     },
@@ -60,9 +62,9 @@ export function UserMenu() {
 
   if (session.user.role === "admin") {
     options.unshift({
-      name: "Admin Dashboard",
+      name: t("admin_dashboard"),
       href: "/admin",
-      desc: "Admin Dashboard",
+      desc: t("admin_dashboard"),
       icon: FiShield,
       isExternal: false,
     });
@@ -105,7 +107,7 @@ export function UserMenu() {
         <MenuDivider />
         <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
           <FiLogOut className="text-blue-500" aria-hidden="true" />
-          <Text>Sign Out</Text>
+          <Text>{t("sign_out")}</Text>
         </MenuItem>
       </MenuList>
     </Menu>

website/src/components/Hero.tsx

@@ -2,8 +2,8 @@ import { Box, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import { useTranslation } from "next-i18next";
 
-import { Container } from "./Container";
 import { AnimatedCircles } from "./AnimatedCircles";
+import { Container } from "./Container";
 
 export function Hero() {
   const { t } = useTranslation("index");

website/src/components/Layout.tsx

@@ -23,7 +23,7 @@ export const getDefaultLayout = (page: React.ReactElement) => (
 
 export const getTransparentHeaderLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     {page}
     <Footer />
   </div>
@@ -31,7 +31,7 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 
 export const getDashboardLayout = (page: React.ReactElement) => (
   <Grid templateRows="min-content 1fr" h="full">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {
@@ -66,7 +66,7 @@ export const getDashboardLayout = (page: React.ReactElement) => (
 
 export const getAdminLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {