auth-4

1"use client";
2 
3import { EyeIcon } from "lucide-react";
4import type React from "react";
5import { LogoIcon } from "@/components/logo";
6import { Plus } from "@/components/plus";
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10 
11const GoogleIcon = (props: React.ComponentProps<"svg">) => (
12  <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
13    <title>Google Icon</title>
14    <g>
15      <path d="M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669   C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62   c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401   c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z" />
16    </g>
17  </svg>
18);
19 
20export function SignupForm() {
21  return (
22    <div className="group relative w-full max-w-md overflow-hidden rounded-2xl border bg-background p-8 shadow-lg">
23      <Plus className="-top-px -left-px" />
24      <Plus className="-top-px -right-px rotate-90" />
25      <Plus className="-bottom-px -left-px -rotate-90" />
26      <Plus className="-bottom-px -right-px rotate-180" />
27 
28      <div className="mb-8 flex flex-col items-center gap-4">
29        <LogoIcon className="size-8" />
30        <div className="text-center">
31          <h2 className="font-bold text-2xl tracking-tight">
32            Create an Account
33          </h2>
34          <p className="text-muted-foreground text-sm">
35            Welcome! Create an account to get started
36          </p>
37        </div>
38      </div>
39 
40      <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
41        <Button
42          className="h-11 w-full font-medium transition-all hover:bg-muted"
43          type="button"
44          variant="outline"
45        >
46          <GoogleIcon className="mr-2 size-4" />
47          Continue with Google
48        </Button>
49 
50        <div className="relative">
51          <div className="absolute inset-0 flex items-center">
52            <span className="w-full border-muted-foreground/20 border-t" />
53          </div>
54          <div className="relative flex justify-center font-bold text-[10px] uppercase tracking-wider">
55            <span className="bg-background px-2 text-muted-foreground">
56              OR CONTINUE WITH
57            </span>
58          </div>
59        </div>
60 
61// … truncated