108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import Link from "next/link"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Input } from "@/shared/components/ui/input"
|
|
import { Label } from "@/shared/components/ui/label"
|
|
import { cn } from "@/shared/lib/utils"
|
|
import { Loader2, Github } from "lucide-react"
|
|
|
|
interface RegisterFormProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
|
|
export function RegisterForm({ className, ...props }: RegisterFormProps) {
|
|
const [isLoading, setIsLoading] = React.useState<boolean>(false)
|
|
|
|
async function onSubmit(event: React.SyntheticEvent) {
|
|
event.preventDefault()
|
|
setIsLoading(true)
|
|
|
|
setTimeout(() => {
|
|
setIsLoading(false)
|
|
}, 3000)
|
|
}
|
|
|
|
return (
|
|
<div className={cn("grid gap-6", className)} {...props}>
|
|
<div className="flex flex-col space-y-2 text-center">
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
Create an account
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enter your email below to create your account
|
|
</p>
|
|
</div>
|
|
<form onSubmit={onSubmit}>
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">Full Name</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder="John Doe"
|
|
type="text"
|
|
autoCapitalize="words"
|
|
autoComplete="name"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
placeholder="name@example.com"
|
|
type="email"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<Button disabled={isLoading}>
|
|
{isLoading && (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
)}
|
|
Create Account
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t" />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-background px-2 text-muted-foreground">
|
|
Or continue with
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" type="button" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Github className="mr-2 h-4 w-4" />
|
|
)}{" "}
|
|
GitHub
|
|
</Button>
|
|
<p className="px-8 text-center text-sm text-muted-foreground">
|
|
Already have an account?{" "}
|
|
<Link
|
|
href="/login"
|
|
className="underline underline-offset-4 hover:text-primary"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|