extended-01

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Checkbox } from "@/registry/default/ui/checkbox";
4import { Input } from "@/registry/default/ui/input";
5import { Label } from "@/registry/default/ui/label";
6import { RiGithubFill, RiGoogleFill } from "@remixicon/vue";
7import { LucideAtSign, LucideEye, LucideEyeOff, LucideLockKeyhole } from "lucide-vue-next";
8 
9const isVisible = ref(false);
10 
11const toggleVisibility = () => {
12  isVisible.value = !isVisible.value;
13};
14</script>
15 
16<template>
17  <div class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
18    <div class="flex w-full max-w-md flex-col gap-4 rounded-lg border p-8 shadow-md">
19      <div class="flex flex-col items-center gap-2 pb-2">
20        <div
21          class="flex size-11 shrink-0 items-center justify-center rounded-full border"
22          aria-hidden="true"
23        >
24          <svg
25            class="stroke-zinc-800 dark:stroke-zinc-100"
26            xmlns="http://www.w3.org/2000/svg"
27            width="20"
28            height="20"
29            viewBox="0 0 32 32"
30            aria-hidden="true"
31          >
32            <circle cx="16" cy="16" r="12" fill="none" stroke-width="8" />
33          </svg>
34        </div>
35        <div class="flex flex-col gap-y-1.5 text-center sm:text-left">
36          <h1 class="text-lg leading-none font-semibold tracking-tight sm:text-center">
37            Welcome back
38          </h1>
39          <p class="text-muted-foreground text-center text-sm">
40            Enter your credentials to login to your account.
41          </p>
42        </div>
43      </div>
44      <form class="flex flex-col gap-4">
45        <div class="flex flex-col gap-2">
46          <Label>Email</Label>
47          <div class="relative">
48            <Input placeholder="hi@yourcompany.com" type="email" required class="peer ps-9" />
49            <div
50              class="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50"
51            >
52              <LucideAtSign :size="16" aria-hidden="true" />
53            </div>
54          </div>
55        </div>
56        <div class="flex flex-col gap-2">
57          <Label>Password</Label>
58          <div class="relative">
59            <Input
60              placeholder="Enter your password"
61              :type="isVisible ? 'text' : 'password'"
62              required
63              class="peer ps-9"
64            />
65            <div
66// … truncated