auth-6

1"use client";
2 
3import { ArrowLeft, MailIcon } from "lucide-react";
4import { Plus } from "@/components/plus";
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8 
9export function ForgotPasswordForm() {
10  return (
11    <div className="group relative w-full max-w-md overflow-hidden rounded-2xl border bg-background p-8 shadow-lg">
12      <Plus className="-top-px -left-px" />
13      <Plus className="-top-px -right-px rotate-90" />
14      <Plus className="-bottom-px -left-px -rotate-90" />
15      <Plus className="-bottom-px -right-px rotate-180" />
16 
17      <div className="mb-8 flex flex-col items-center gap-4">
18        <div className="mb-2 flex size-12 items-center justify-center rounded-full bg-primary/5">
19          <MailIcon className="size-6 text-primary/60" />
20        </div>
21        <div className="text-center">
22          <h2 className="font-bold text-2xl tracking-tight">
23            Forgot Password?
24          </h2>
25          <p className="max-w-[280px] text-muted-foreground text-sm">
26            No worries, we&apos;ll send you reset instructions via email.
27          </p>
28        </div>
29      </div>
30 
31      <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
32        <div className="grid gap-2 text-start">
33          <Label htmlFor="email">Email Address</Label>
34          <Input
35            className="h-10"
36            id="email"
37            placeholder="name@example.com"
38            type="email"
39          />
40        </div>
41 
42        <Button
43          className="mt-2 h-11 w-full font-semibold shadow-sm transition-all active:scale-[0.98]"
44          type="submit"
45        >
46          Send Reset Link
47        </Button>
48 
49        <a
50          className="mt-6 flex items-center justify-center gap-2 font-medium text-muted-foreground text-xs transition-colors hover:text-primary"
51          href="#"
52        >
53          <ArrowLeft className="size-3" />
54          Back to Sign In
55        </a>
56      </form>
57    </div>
58  );
59}