extended-04

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Input } from "@/registry/default/ui/input";
4import { Label } from "@/registry/default/ui/label";
5</script>
6 
7<template>
8  <div class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
9    <div class="flex w-full max-w-md flex-col gap-4 rounded-lg border p-8 shadow-md">
10      <div class="flex flex-col items-center gap-2 pb-2">
11        <div
12          class="flex size-11 shrink-0 items-center justify-center rounded-full border"
13          aria-hidden="true"
14        >
15          <svg
16            class="stroke-zinc-800 dark:stroke-zinc-100"
17            xmlns="http://www.w3.org/2000/svg"
18            width="20"
19            height="20"
20            viewBox="0 0 32 32"
21            aria-hidden="true"
22          >
23            <circle cx="16" cy="16" r="12" fill="none" stroke-width="8" />
24          </svg>
25        </div>
26        <div class="flex flex-col gap-y-1.5 text-center sm:text-left">
27          <h1 class="text-lg leading-none font-semibold tracking-tight sm:text-center">
28            Forgot your password?
29          </h1>
30          <p class="text-muted-foreground text-center text-sm">
31            Enter your email to reset your password.
32          </p>
33        </div>
34      </div>
35      <form class="flex flex-col gap-4">
36        <div class="flex flex-col gap-2">
37          <Label>Email</Label>
38          <Input placeholder="Enter your email" type="email" required />
39        </div>
40        <Button type="submit" class="w-full">Send reset link</Button>
41        <p class="text-muted-foreground text-sm">
42          Remember your password?
43          <a href="/login" class="text-primary font-medium hover:underline">Login</a>
44        </p>
45      </form>
46    </div>
47  </div>
48</template>