feat: register route

src/components/Login/LoginModal.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2, X } from "lucide-react";
 import { useForm } from "react-hook-form";
 import ReactModal from "react-modal";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
 import { z } from "zod";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
@@ -84,7 +84,7 @@ export function LoginModal({ refetchUser }: { refetchUser: () => void }) {
         </div>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="py-4 space-y-3">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 py-4">
             <FormField
               control={form.control}
               name="email"
@@ -123,9 +123,9 @@ export function LoginModal({ refetchUser }: { refetchUser: () => void }) {
 
             <div className="text-sm font-medium text-gray-500">
               Not registered?&nbsp;
-              <a href="#" className="text-blue-700 hover:underline">
+              <Link to="/register" className="text-blue-700 hover:underline">
                 Create an account
-              </a>
+              </Link>
             </div>
           </form>
         </Form>

src/components/Register/RegisterForm.tsx

@@ -0,0 +1,67 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@components/ui/button.tsx";
+
+const formSchema = z.object({
+  email: z.string().email({ message: "Enter a valid email." }),
+  password: z.string().min(1, { message: "Enter a password." }),
+});
+
+export function RegisterForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onSubmit",
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    console.log(values);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 py-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="[email protected]" type="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input placeholder="Your password" type="password" {...field} />
+              </FormControl>
+              <FormDescription>Make sure to always keep your password safe.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={false}>
+          {false && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Create
+        </Button>
+      </form>
+    </Form>
+  );
+}

src/main.tsx

@@ -5,9 +5,9 @@ import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
-import UnhandledError from "@pages/error";
 import { router } from "@pages/router.tsx";
 import { apolloClient } from "@utils/apolloSetup.ts";
+import UnhandledError from "pages/Error";
 import "./global.scss";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

src/pages/Register/index.tsx

@@ -0,0 +1,11 @@
+import { RegisterForm } from "@components/Register/RegisterForm.tsx";
+
+export default function Register() {
+  return (
+    <div className="flex min-h-screen w-screen items-center justify-center flex-col">
+      <h1>Create your account</h1>
+
+      <RegisterForm />
+    </div>
+  );
+}

src/pages/router.tsx

@@ -1,12 +1,13 @@
 import { createBrowserRouter } from "react-router-dom";
 import { Layout } from "@components/Layout/Layout.tsx";
-import UnhandledError from "@pages/error";
 import { ProtectedRoute } from "@pages/ProtectedRoute";
-import About from "./about";
-import Game from "./game";
-import Home from "./home";
-import NotFound from "./notFound";
-import Profile from "./profile";
+import About from "./About";
+import UnhandledError from "./Error";
+import Game from "./Game";
+import Home from "./Home";
+import NotFound from "./NotFound";
+import Profile from "./Profile";
+import Register from "./Register";
 
 export const router = createBrowserRouter([
   {
@@ -22,6 +23,10 @@ export const router = createBrowserRouter([
         path: "/game",
         element: <Game />,
       },
+      {
+        path: "/register",
+        element: <Register />,
+      },
       {
         path: "/profile",
         element: (