chore: faq-link

Author: tractorss

src/app/[locale]/components/Navbar.tsx

@@ -3,7 +3,6 @@
 import React, { useMemo } from "react";
 
 import clsx from "clsx";
-import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -17,12 +16,14 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { locales } from "@/i18n/routing";
 import { ExternalLink, HelpCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 interface INavbar {
   locale: (typeof locales)[number];
 }
 
 const Navbar: React.FC<INavbar> = ({ locale }) => {
+  const t = useTranslations("navbar");
   const pathname = usePathname();
 
   const pathWithoutLocale = useMemo(
@@ -52,16 +53,24 @@ const Navbar: React.FC<INavbar> = ({ locale }) => {
             />
           </Link>
           <div className="flex items-center gap-4">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-white hover:bg-white/20"
-              dir="auto"
+            <Link
+              href={
+                "https://www.notion.so/kleros/FAQ-about-Kleros-Enterprise-1f59a9db4f08808a94fdf2598f644c1e?showMoveTo=true&saveParent=true"
+              }
+              rel="noreferrer"
+              target="_blank"
             >
-              <HelpCircle className="w-4 h-4 mr-2" />
-              FAQ
-              <ExternalLink className="w-3 h-3 ml-1" />
-            </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-white hover:bg-white/20"
+                dir="auto"
+              >
+                <HelpCircle className="w-4 h-4 mr-2" />
+                {t("faq")}
+                <ExternalLink className="w-3 h-3 ml-1" />
+              </Button>
+            </Link>
             <div
               className={clsx(
                 "justify-self-end place-self-center",
@@ -80,19 +89,21 @@ const Navbar: React.FC<INavbar> = ({ locale }) => {
                 <DropdownMenuContent className="min-w-min">
                   {locales.map((innerLocale) =>
                     innerLocale !== locale ? (
-                      <DropdownMenuItem
+                      <Link
+                        href={`/${innerLocale}/${pathWithoutLocale}`}
                         key={innerLocale}
-                        className={clsx(
-                          "hover:cursor-pointer hover:bg-light-background",
-                          "py-2 px-4",
-                        )}
                       >
-                        <Link href={`/${innerLocale}/${pathWithoutLocale}`}>
+                        <DropdownMenuItem
+                          className={clsx(
+                            "hover:cursor-pointer hover:bg-light-background",
+                            "py-2 px-4",
+                          )}
+                        >
                           <span className="text-primary-text text-center">
                             {innerLocale.toUpperCase()}
                           </span>
-                        </Link>
-                      </DropdownMenuItem>
+                        </DropdownMenuItem>
+                      </Link>
                     ) : null,
                   )}
                 </DropdownMenuContent>