adiciona algumas nveçãoes por teclado

Author: Andra-sun

frontend/src/app/(home)/create/questions/automatico/automatico.tsx

@@ -1,4 +1,3 @@
-// /create/question/automatico/automatico.tsx
 "use client";
 
 import { useState } from "react";

frontend/src/app/(home)/home/page.tsx

@@ -1,23 +1,49 @@
 "use client";
 
-import { CiAlarmOn, CiBasketball, CiBookmarkPlus, CiShare1, CiUser, CiViewList } from "react-icons/ci";
+import {  CiBookmarkPlus, CiUser, CiViewList } from "react-icons/ci";
+import { BsArrowUp, BsArrowDown, BsArrowLeft, BsArrowRight } from "react-icons/bs";
 import HomeCard from "./card";
 import Acessibilidade from "./acessibilidade";
 import { useUser } from "@/hook/useUser";
 import { useEffect } from "react";
-// import ThemeList from "./themeList";
-
+import { useRouter } from "next/navigation";
 
 export default function Home() {
-const { user, getMe } = useUser();
-  useEffect(() => {
-    getMe();
-  }, []);
+    const { user, getMe } = useUser();
+    const router = useRouter();
+
+    useEffect(() => {
+        getMe();
+    }, []);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            switch (e.key) {
+                case "ArrowUp":
+                    e.preventDefault();
+                    router.push("/create"); // Navega para Criar Quiz
+                    break;
+                case "ArrowDown":
+                    e.preventDefault();
+                    router.push("/play"); // Navega para Ver Quizzes
+                    break;
+                case "ArrowRight":
+                    e.preventDefault();
+                    router.push("/profile"); // Navega para Perfil
+                    break;
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [router]);
 
     return (
         <div className="flex h-full mt-6 space-x-24">
             <div className="flex-1 h-full flex flex-col gap-9">
-            {/* <div className="flex-1 h-full flex flex-col gap-9 max-w-2/3"> */}
                 <h1 className="font-bold text-4xl capitalize">
                     Olá, {user?.name || "Visitante"}!
                 </h1>
@@ -30,7 +56,7 @@ const { user, getMe } = useUser();
                             href= "/create"
                             ariaLabel= "Criar Quiz - Crie seus próprios quizzes personalizados."
                             color= "create"
-                            cornerIcon={<CiShare1 />}
+                            cornerIcon={<BsArrowUp />}
                         />
                         <HomeCard
                             key= {3}
@@ -39,6 +65,7 @@ const { user, getMe } = useUser();
                             description= "Veja sua lista de quizzes."
                             href= "/play"
                             color= "play"
+                            cornerIcon={<BsArrowDown />}
                             />
                         <HomeCard
                             key= {4}
@@ -47,12 +74,12 @@ const { user, getMe } = useUser();
                             description= "Acesse e edite seu perfil."
                             href= "/profile"
                             color= "ranking"
+                            cornerIcon={<BsArrowRight />}
                         />
                 </div>
                 <Acessibilidade />
             </div>
 
-            {/* <ThemeList /> */}
         </div>
     );
-}
+}

frontend/src/app/login/page.tsx

@@ -1,14 +1,19 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/hook/useAuth";
 import { Button } from "@/components/ui/button";
+import { BsArrowDown, BsArrowUp, BsArrowReturnLeft } from "react-icons/bs";
 
 export default function Login() {
     const { login, loading, error } = useAuth();
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
+    
+    const emailRef = useRef<HTMLInputElement>(null);
+    const passwordRef = useRef<HTMLInputElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -19,6 +24,39 @@ export default function Login() {
         }
     };
 
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Seta para cima - foca no email
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                emailRef.current?.focus();
+            }
+            // Seta para baixo - foca na senha
+            else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                if (document.activeElement === emailRef.current) {
+                    passwordRef.current?.focus();
+                } else {
+                    emailRef.current?.focus();
+                }
+            }
+            else if ((e.key === "ArrowReturnLeft" || e.key === "Enter") && 
+                     document.activeElement !== emailRef.current && 
+                     document.activeElement !== passwordRef.current) {
+                e.preventDefault();
+                if (!loading) {
+                    buttonRef.current?.click();
+                }
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [loading]);
+
     return (
         <div className="flex flex-col items-center justify-center">
             {loading && <p>Carregando...</p>}
@@ -31,30 +69,36 @@ export default function Login() {
                 <div className="grid grid-cols-1 gap-2">
                     <label>Email</label>
                     <Input
+                        ref={emailRef}
                         type="email"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
+                        suffix={<BsArrowUp />}
                         required
                     />
                 </div>
                 <div className="grid grid-cols-1 gap-2">
                     <label>Senha</label>
                     <Input
+                        ref={passwordRef}
                         type="password"
+                        suffix={<BsArrowDown />}
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         required
                     />
                 </div>
                 <Button
+                    ref={buttonRef}
                     type="submit"
                     disabled={loading}
                     className="mt-4 hover:bg-qorange-500"
+                    suffix={<BsArrowReturnLeft />}
                 >
                     {loading ? "Entrando..." : "Entrar"}
                 </Button>
                 <div>Novo no QuizLab? <a href="/quiz-lab/registro" className="text-qyellow-default cursor-pointer underline">Cadastre-se</a></div>
             </form>
         </div>
     );
-}
+}

frontend/src/app/registro/page.tsx

@@ -1,16 +1,22 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/hook/useAuth";
 import { Button } from "@/components/ui/button";
+import { BsArrowDown, BsArrowLeft, BsArrowReturnLeft, BsArrowUp } from "react-icons/bs";
 
 export default function Registro() {
   const { register, loading, error, clearError } = useAuth();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  const nameRef = useRef<HTMLInputElement>(null);
+  const emailRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     clearError();
@@ -23,6 +29,51 @@ export default function Registro() {
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Seta para cima - foca no nome
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        nameRef.current?.focus();
+      }
+      // Seta para direita - navega entre campos
+      else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (document.activeElement === nameRef.current) {
+          emailRef.current?.focus();
+        } else if (document.activeElement === emailRef.current) {
+          passwordRef.current?.focus();
+        } else {
+          nameRef.current?.focus();
+        }
+      }
+      // Seta para baixo - navega entre campos
+      else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (document.activeElement === nameRef.current) {
+          emailRef.current?.focus();
+        } else if (document.activeElement === emailRef.current) {
+          passwordRef.current?.focus();
+        } else {
+          nameRef.current?.focus();
+        }
+      }
+      // Enter - submete o formulário
+      else if (e.key === "Enter") {
+        e.preventDefault();
+        if (!loading) {
+          buttonRef.current?.click();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [loading]);
+
   return (
     <div className="flex flex-col items-center justify-center">
       <h1 className="text-6xl font-black">Cadastrar-se</h1>
@@ -45,6 +96,8 @@ export default function Registro() {
             value={name}
             onChange={(e) => setName(e.target.value)}
             disabled={loading}
+            ref={nameRef}
+            suffix={<BsArrowUp />}
             required
           />
         </div>
@@ -54,9 +107,11 @@ export default function Registro() {
           <Input
             id="email"
             type="email"
+            ref={emailRef}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             disabled={loading}
+            suffix={<BsArrowDown />}
             required
           />
         </div>
@@ -67,18 +122,24 @@ export default function Registro() {
             id="password"
             type="password"
             value={password}
+            ref={passwordRef}
             onChange={(e) => setPassword(e.target.value)}
             disabled={loading}
+            suffix={<BsArrowLeft />}
             required
           />
         </div>
+        
         <Button 
-            type="submit" 
-            disabled={loading} 
-            className="mt-4 hover:bg-qorange-500"
-          >
+          ref={buttonRef}
+          type="submit" 
+          disabled={loading} 
+          className="mt-4 hover:bg-qorange-500"
+          suffix={<BsArrowReturnLeft />}
+        >
           {loading ? "Registrando..." : "Registrar"}
         </Button>
+        
         <div>Já tem uma conta? <a className="text-qyellow-default cursor-pointer underline" href="/quiz-lab/login">Faça login!</a></div>
       </form>
     </div>

frontend/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef } from "react";
-import type { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 const baseStyles =
@@ -25,10 +25,11 @@ export type ButtonSize = keyof typeof sizeStyles;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    suffix?: ReactNode;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ variant = "solid", size = "md", className, disabled, ...props }, ref) => {
+    ({ variant = "solid", size = "md", className, disabled, suffix, children, ...props }, ref) => {
         return (
             <button
                 ref={ref}
@@ -41,7 +42,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 )}
                 disabled={disabled}
                 {...props}
-            />
+            >
+                {children}
+                {suffix && <span className="ml-2">{suffix}</span>}
+            </button>
         );
     }
 );