extended-02

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";
5import { RiGithubFill, RiGoogleFill } from "@remixicon/vue";
6</script>
7 
8<template>
9  <div class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
10    <div class="flex w-full max-w-md flex-col gap-4 rounded-lg border p-8 shadow-md">
11      <div class="flex flex-col items-center gap-2 pb-2">
12        <div
13          class="flex size-11 shrink-0 items-center justify-center rounded-full border"
14          aria-hidden="true"
15        >
16          <svg
17            class="stroke-zinc-800 dark:stroke-zinc-100"
18            xmlns="http://www.w3.org/2000/svg"
19            width="20"
20            height="20"
21            viewBox="0 0 32 32"
22            aria-hidden="true"
23          >
24            <circle cx="16" cy="16" r="12" fill="none" stroke-width="8" />
25          </svg>
26        </div>
27        <div class="flex flex-col gap-y-1.5 text-center sm:text-left">
28          <h1 class="text-lg leading-none font-semibold tracking-tight sm:text-center">
29            Create an account
30          </h1>
31          <p class="text-muted-foreground text-center text-sm">
32            We just need a few details to get you started.
33          </p>
34        </div>
35      </div>
36      <form class="flex flex-col gap-4">
37        <div class="flex flex-col gap-2">
38          <Label>Name</Label>
39          <Input placeholder="Enter your name" required />
40        </div>
41        <div class="flex flex-col gap-2">
42          <Label>Email</Label>
43          <Input placeholder="Enter your email" type="email" required />
44        </div>
45        <div class="flex flex-col gap-2">
46          <Label>Password</Label>
47          <Input placeholder="Enter your password" type="password" required />
48        </div>
49        <div class="flex flex-col gap-2">
50          <Label>Password Confirmation</Label>
51          <Input placeholder="Confirm your password" type="password" required />
52        </div>
53        <Button type="submit" class="w-full">Create account</Button>
54        <p class="text-muted-foreground text-sm">
55          Already have an account?
56          <a href="/login" class="text-primary font-medium hover:underline">Login</a>
57        </p>
58      </form>
59      <div
60        class="before:bg-border after:bg-border flex items-center gap-3 before:h-px before:flex-1 after:h-px after:flex-1"
61      >
62// … truncated