Forgot Password One

1import { Button } from '@/components/ui/button'
2import { Input } from '@/components/ui/input'
3import { Label } from '@/components/ui/label'
4import { IconFingerprint } from '@tabler/icons-react'
5import Link from 'next/link'
6 
7export default function ForgotPasswordOne() {
8  return (
9    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
10      <form className="m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border bg-muted shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]">
11        <div className="-m-px rounded-[calc(var(--radius)+.125rem)] border bg-card p-8 pb-6">
12          <div className="flex items-start gap-4">
13            <div className="flex size-11 shrink-0 items-center justify-center">
14              <IconFingerprint aria-hidden="true" className="size-10 text-red-400" />
15            </div>
16            <div>
17              <h1 className="text-xl font-semibold tracking-tight">Forgot your password?</h1>
18              <p className="mt-1.5 text-sm text-muted-foreground">
19                Don&apos;t worry we will send you reset instructions
20              </p>
21            </div>
22          </div>
23 
24          <div className="mt-7 space-y-5">
25            <div className="space-y-2">
26              <Label htmlFor="email" className="block text-sm font-medium">
27                Email address
28              </Label>
29              <Input
30                type="email"
31                required
32                name="email"
33                id="email"
34                autoComplete="email"
35                placeholder="you@company.com"
36              />
37            </div>
38 
39            <Button type="submit" className="w-full">
40              Email me a reset link
41            </Button>
42          </div>
43 
44          <p className="mt-5 text-center text-xs text-muted-foreground">
45            Follow the instructions in the email.
46          </p>
47        </div>
48 
49        <div className="p-4">
50          <p className="text-center text-sm text-accent-foreground">
51            <Link
52              href="/work/forgot-password/one"
53              className="group text-sm text-muted-foreground transition-colors hover:text-foreground"
54            >
55              ← Back to <span className="font-medium group-hover:underline">Sign In</span>
56            </Link>
57          </p>
58        </div>
59      </form>
60    </section>
61  )
62}