59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@repo/shadcn-ui/components/card";
|
|
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@repo/shadcn-ui/components/field";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
|
|
export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div className={cn("flex flex-col gap-6", className)} {...props}>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Login to your account</CardTitle>
|
|
<CardDescription>Enter your email below to login to your account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor='email'>Email</FieldLabel>
|
|
<Input id='email' type='email' placeholder='m@example.com' required />
|
|
</Field>
|
|
<Field>
|
|
<div className='flex items-center'>
|
|
<FieldLabel htmlFor='password'>Password</FieldLabel>
|
|
<a
|
|
// biome-ignore lint/a11y/useValidAnchor: <explanation>
|
|
href='#'
|
|
className='ml-auto inline-block text-sm underline-offset-4 hover:underline'
|
|
>
|
|
Forgot your password?
|
|
</a>
|
|
</div>
|
|
<Input id='password' type='password' required />
|
|
</Field>
|
|
<Field>
|
|
<Button type='submit'>Login</Button>
|
|
<Button variant='outline' type='button'>
|
|
Login with Google
|
|
</Button>
|
|
<FieldDescription className='text-center'>
|
|
Don't have an account?{" "}
|
|
{/** biome-ignore lint/a11y/useValidAnchor: <explanation> */}
|
|
<a href='#'>Sign up</a>
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|