extended-03

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3</script>
4 
5<template>
6  <div class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
7    <div class="flex w-full max-w-md flex-col gap-4 rounded-lg border p-8 shadow-md">
8      <div class="flex flex-col items-center gap-2 pb-2">
9        <div
10          class="flex size-11 shrink-0 items-center justify-center rounded-full border"
11          aria-hidden="true"
12        >
13          <svg
14            class="stroke-zinc-800 dark:stroke-zinc-100"
15            xmlns="http://www.w3.org/2000/svg"
16            width="20"
17            height="20"
18            viewBox="0 0 32 32"
19            aria-hidden="true"
20          >
21            <circle cx="16" cy="16" r="12" fill="none" stroke-width="8" />
22          </svg>
23        </div>
24        <div class="flex flex-col gap-y-1.5 text-center sm:text-left">
25          <h1 class="text-lg leading-none font-semibold tracking-tight sm:text-center">
26            Thanks for signing up!
27          </h1>
28          <p class="text-muted-foreground text-center text-sm">
29            Please verify your email address before continuing.
30          </p>
31        </div>
32      </div>
33      <form class="flex flex-col gap-4">
34        <p class="text-muted-foreground text-sm/relaxed">
35          We've sent a verification link to
36          <a href="#" class="text-foreground font-semibold">example@email.com.</a>
37          Please click the link to verify your email address.
38        </p>
39        <p class="text-muted-foreground text-sm/relaxed">
40          Didn't receive the email? Click the button below to resend the verification link.
41        </p>
42        <div class="flex w-full items-center justify-between gap-4">
43          <Button>Resend verification email</Button>
44          <Button variant="link">Log out</Button>
45        </div>
46      </form>
47    </div>
48  </div>
49</template>