added a feature for sending mail from within the application

app/register/page.tsx

@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
+import { Button, Field, Input } from "@/components/ui/form";
 
 export default function RegisterPage() {
   const router = useRouter();
@@ -31,89 +32,67 @@ export default function RegisterPage() {
   }
 
   return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto flex max-w-md flex-col px-4 py-10">
-        <h1 className="text-2xl font-semibold tracking-tight">
-          Join the <span className="text-amber-300">Battl Builder</span> Beta
-        </h1>
-        <p className="mt-2 text-sm text-zinc-400">
-          Create an account so we can save your builds, watch price drops, and
-          roll out new features to you first.
-        </p>
+      <main className="min-h-screen bg-black text-zinc-50">
+        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Join the <span className="text-amber-300">Battl Builder</span> Beta
+          </h1>
+          <p className="mt-2 text-sm text-zinc-400">
+            Create an account so we can save your builds, watch price drops, and
+            roll out new features to you first.
+          </p>
 
-        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
-          {error && (
-            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-              {error}
-            </div>
-          )}
+          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+            {error && (
+                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                  {error}
+                </div>
+            )}
 
-          <div className="space-y-1">
-            <label
-              className="text-xs font-medium text-zinc-400"
-              htmlFor="displayName"
-            >
-              Display Name (optional)
-            </label>
-            <input
-              id="displayName"
-              type="text"
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-            />
-          </div>
+            <Field label="Display Name (optional)" htmlFor="displayName">
+              <Input
+                  id="displayName"
+                  type="text"
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+              />
+            </Field>
 
-          <div className="space-y-1">
-            <label className="text-xs font-medium text-zinc-400" htmlFor="email">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              autoComplete="email"
-              required
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
+            <Field label="Email" htmlFor="email">
+              <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+              />
+            </Field>
 
-          <div className="space-y-1">
-            <label
-              className="text-xs font-medium text-zinc-400"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              autoComplete="new-password"
-              required
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
+            <Field label="Password" htmlFor="password">
+              <Input
+                  id="password"
+                  type="password"
+                  autoComplete="new-password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+              />
+            </Field>
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="mt-2 w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 hover:bg-amber-400/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            {loading ? "Creating account…" : "Join Beta"}
-          </button>
-        </form>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Creating account…" : "Join Beta"}
+            </Button>
+          </form>
 
-        <p className="mt-4 text-xs text-zinc-500">
-          Already have an account?{" "}
-          <Link href="/login" className="text-amber-300 hover:text-amber-200">
-            Log in
-          </Link>
-          .
-        </p>
-      </div>
-    </main>
+          <p className="mt-4 text-xs text-zinc-500">
+            Already have an account?{" "}
+            <Link href="/login" className="text-amber-300 hover:text-amber-200">
+              Log in
+            </Link>
+            .
+          </p>
+        </div>
+      </main>
   );
 }