feat: add sign up page

app/(public)/sign-up/page.tsx

@@ -0,0 +1,156 @@
+import { headers } from "next/headers";
+import Image from "next/image";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { createClient } from "@/db/server";
+
+export default function Component() {
+  const signUp = async (formData: FormData) => {
+    "use server";
+
+    const origin = headers().get("origin");
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+    const supabase = createClient();
+
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: `${origin}/auth/callback`,
+      },
+    });
+
+    if (error) {
+      return redirect("/sign-up?message=Could not authenticate user");
+    }
+
+    return redirect("/sign-in?message=Check email to continue sign in process");
+  };
+  return (
+    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+      <div className="flex items-center justify-center py-12">
+        <div className="mx-auto grid w-[350px] gap-6">
+          <div className="grid gap-2 text-center">
+            <h1 className="text-3xl font-bold">Sign up</h1>
+            <p className="text-balance text-muted-foreground">
+              Enter your email below to create an account
+            </p>
+          </div>
+          <form action={signUp} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                placeholder="[email protected]"
+                required
+                type="email"
+              />
+            </div>
+            <div className="relative grid gap-2">
+              <div className="flex items-center">
+                <Label htmlFor="password">Password</Label>
+                <Link
+                  className="ml-auto inline-block text-sm underline"
+                  href="#"
+                >
+                  Forgot your password?
+                </Link>
+              </div>
+              <div className="relative">
+                <Input
+                  id="password"
+                  placeholder="******"
+                  required
+                  type="password"
+                />
+                <div className="mt-2 flex items-center justify-between gap-1">
+                  <div className="h-1 w-1/4 rounded-full bg-gray-200" />
+                  <div className="h-1 w-1/4 rounded-full bg-gray-200" />
+                  <div className="h-1 w-1/4 rounded-full bg-gray-200" />
+                  <div className="h-1 w-1/4 rounded-full bg-gray-200" />
+                </div>
+                <Button
+                  className="absolute right-1 top-1 h-7 w-7"
+                  size="icon"
+                  variant="ghost"
+                >
+                  <EyeIcon className="h-4 w-4" />
+                  <span className="sr-only">Toggle password visibility</span>
+                </Button>
+              </div>
+            </div>
+            <div className="relative grid gap-2">
+              <Label htmlFor="retype-password">Re-type Password</Label>
+              <div className="relative">
+                <Input
+                  id="retype-password"
+                  placeholder="******"
+                  required
+                  type="password"
+                />
+                <Button
+                  className="absolute right-1 top-1 h-7 w-7"
+                  size="icon"
+                  variant="ghost"
+                >
+                  <EyeIcon className="h-4 w-4" />
+                  <span className="sr-only">Toggle password visibility</span>
+                </Button>
+              </div>
+            </div>
+            <Button className="w-full" type="submit">
+              Sign up
+            </Button>
+            <Button className="w-full" variant="outline">
+              Sign up with Google
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            Already have an account?
+            <Link className="underline" href="#">
+              Login
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="hidden bg-muted lg:block">
+        <Image
+          alt="Image"
+          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+          height="1080"
+          src="/placeholder.svg"
+          style={{
+            aspectRatio: "1920/1080",
+            objectFit: "cover",
+          }}
+          width="1920"
+        />
+      </div>
+    </div>
+  );
+}
+
+function EyeIcon({ className }: { className: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}