add js and ts lints

app/javascript/src/components/Header.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
+import type { FC } from "react";
+import React from "react";
 
-export type HeaderProps = {};
-
-export const Header = ({ children }: React.PropsWithChildren<HeaderProps>) => {
+export const Header: FC = ({ children }) => {
   return (
     <div className="w-full h-64 bg-gradient-to-br from-green-300 to-green-400 grid place-items-center">
       {children}

app/javascript/src/components/Navbar.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
-import XStakeLogo from '../images/logo.png'
+
+import XStakeLogo from "../images/logo.png";
 import { useAppContext } from "../contexts/AppContext";
 
 export const Navbar = () => {
-  const { setSideNavExpanded } = useAppContext()
+  const { setSideNavExpanded } = useAppContext();
 
   const handleExpandSideNav = () => {
     setSideNavExpanded((prevState) => !prevState);
@@ -35,9 +36,9 @@ export const Navbar = () => {
       </button>
       <img
         src={XStakeLogo}
-        alt={"XStake Logo"}
+        alt="XStake Logo"
         width={64}
-        placeholder={"blurred"}
+        placeholder="blurred"
       />
       <h1 className="text-2xl font-bold">XStake</h1>
       <div className="w-full h-full flex items-center justify-end">

app/javascript/src/components/SideNav.tsx

@@ -1,35 +1,50 @@
 import * as React from "react";
 import cx from "classnames";
+import { Link } from "react-router-dom";
+
 import { useAppContext } from "../contexts/AppContext";
 
 type MenuItem = {
   label: string;
+  path: string;
 };
 
 const MenuItems: MenuItem[] = [
   {
     label: "Início",
+    path: "/",
   },
   {
     label: "Stake",
+    path: "/stake",
   },
   {
     label: "Carteira",
+    path: "/wallet",
   },
 ];
 
-
 export const SideNav = () => {
-  const { sideNavExpanded, setSideNavExpanded } = useAppContext()
+  const { sideNavExpanded, setSideNavExpanded } = useAppContext();
 
   const handleCloseSideNav = () => {
     setSideNavExpanded(false);
   };
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Escape") {
+      handleCloseSideNav();
+    }
+  };
+
   return (
-    <div className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72">
+    <div
+      className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72"
+      role="menu"
+    >
       <div
-        role="row"
+        role="none"
+        onKeyPress={handleKeyPress}
         onClick={() => handleCloseSideNav()}
         className={cx(
           "xl:hidden absolute w-full h-full bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm z-30 transition-all duration-500",
@@ -43,12 +58,11 @@ export const SideNav = () => {
       >
         <ul>
           {MenuItems.map((item) => (
-            <li
-              key={item.label}
-              className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
-            >
-              <a href="#">{item.label}</a>
-            </li>
+            <Link to={item.path} key={item.label} role="menuitem">
+              <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
+                {item.label}
+              </li>
+            </Link>
           ))}
         </ul>
       </aside>