66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cn } from "cn"
|
|
|
|
import { Icons } from "@/components/icons"
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import {
|
|
Field,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSeparator,
|
|
} from "@/registry/new-york-v4/ui/field"
|
|
import { Input } from "@/registry/new-york-v4/ui/input"
|
|
import { Spinner } from "@/registry/new-york-v4/ui/spinner"
|
|
|
|
export function UserAuthForm({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
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}>
|
|
<form onSubmit={onSubmit}>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel className="sr-only" htmlFor="email">
|
|
Email
|
|
</FieldLabel>
|
|
<Input
|
|
id="email"
|
|
placeholder="name@example.com"
|
|
type="email"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
disabled={isLoading}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<Button disabled={isLoading}>
|
|
{isLoading && <Spinner />}
|
|
Sign In with Email
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
<FieldSeparator>Or continue with</FieldSeparator>
|
|
<Button variant="outline" type="button" disabled={isLoading}>
|
|
{isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 h-4 w-4" />}{" "}
|
|
GitHub
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|