Add localization to pages, header and footer

Fix import orders for useTranslation

Apply common translations for header and footer

lint

Fix getServerSideProps messages/id

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>