Add keyboard motions for onboarding

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal } from "@codex-storage/marketplace-ui-components";
 import { ArrowRight } from "lucide-react";
 import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
@@ -26,6 +26,19 @@ function Index() {
 
   const onNextStep = () => navigate({ to: "/onboarding-name" });
 
+  useEffect(() => {
+    const onKeyPress = (event: Event) => {
+      const e = event as KeyboardEvent;
+      if (e.key === "ArrowRight") {
+        navigate({ to: "/onboarding-name" });
+      }
+    };
+
+    document.addEventListener("keydown", onKeyPress);
+
+    return () => document.removeEventListener("keydown", onKeyPress);
+  }, [navigate]);
+
   return (
     <>
       <OnBoardingLayout defaultIsStepValid={false} step={0}>
@@ -56,7 +69,10 @@ function Index() {
               Let’s get started <ArrowRight></ArrowRight>
             </a>
 
-            <Modal onClose={onLegalDisclaimerClose} open={modal}>
+            <Modal
+              onClose={onLegalDisclaimerClose}
+              open={modal}
+              className="disclaimer">
               <h1>Disclaimer</h1>
 
               <p>

src/routes/onboarding-checks.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { attributes } from "../utils/attributes";
 import ArrowRightCircle from "../assets/icons/arrow-circle.svg?react";
 import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
@@ -14,6 +14,21 @@ const OnBoardingChecks = () => {
   const [isStepValid, setIsStepValid] = useState(false);
   const navigate = useNavigate({ from: "/onboarding-checks" });
 
+  useEffect(() => {
+    const onKeyPress = (event: Event) => {
+      const e = event as KeyboardEvent;
+      if (e.key === "ArrowRight" && isStepValid) {
+        navigate({ to: "/dashboard" });
+      } else if (e.key === "ArrowLeft") {
+        navigate({ to: "/onboarding-name" });
+      }
+    };
+
+    document.addEventListener("keydown", onKeyPress);
+
+    return () => document.removeEventListener("keydown", onKeyPress);
+  }, [navigate, isStepValid]);
+
   const onNextStep = () => {
     if (isStepValid) {
       navigate({ to: "/dashboard" });

src/routes/onboarding-name.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
 import { attributes } from "../utils/attributes";
 import ArrowRightCircle from "../assets/icons/arrow-circle.svg?react";
@@ -21,6 +21,21 @@ const OnBoardingName = () => {
     }
   };
 
+  useEffect(() => {
+    const onKeyPress = (event: Event) => {
+      const e = event as KeyboardEvent;
+      if (e.key === "ArrowRight") {
+        navigate({ to: "/onboarding-checks" });
+      } else if (e.key === "ArrowLeft") {
+        navigate({ to: "/" });
+      }
+    };
+
+    document.addEventListener("keydown", onKeyPress);
+
+    return () => document.removeEventListener("keydown", onKeyPress);
+  }, [navigate]);
+
   return (
     <OnBoardingLayout defaultIsStepValid={false} step={1}>
       <>