auth-8

1"use client";
2 
3import { EyeIcon } from "lucide-react";
4import { LogoIcon } from "@/components/logo";
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8 
9export function MinimalLoginForm() {
10  return (
11    <div className="group w-full max-w-sm bg-transparent p-4">
12      <div className="mb-8 flex flex-col gap-2">
13        <LogoIcon className="mb-2 size-8" />
14        <h2 className="font-bold text-3xl tracking-tighter">Sign In</h2>
15        <p className="text-muted-foreground text-sm">
16          Enter your credentials to access your account
17        </p>
18      </div>
19 
20      <form className="space-y-5" onSubmit={(e) => e.preventDefault()}>
21        <div className="grid gap-4">
22          <div className="grid gap-1.5 text-start">
23            <Label
24              className="font-bold text-[11px] text-muted-foreground/70 uppercase tracking-widest"
25              htmlFor="email-minimal"
26            >
27              Identifier
28            </Label>
29            <Input
30              className="h-12 rounded-xl border-white/10 bg-white/5 transition-all focus:bg-white/10"
31              id="email-minimal"
32              placeholder="Username or Email"
33              type="text"
34            />
35          </div>
36          <div className="grid gap-1.5 text-start">
37            <div className="flex items-center justify-between">
38              <Label
39                className="font-bold text-[11px] text-muted-foreground/70 uppercase tracking-widest"
40                htmlFor="password-minimal"
41              >
42                Security
43              </Label>
44              <a
45                className="text-[10px] text-primary/60 transition-colors hover:text-primary"
46                href="#"
47              >
48                Forgot?
49              </a>
50            </div>
51            <div className="relative">
52              <Input
53                className="h-12 rounded-xl border-white/10 bg-white/5 pr-12 transition-all focus:bg-white/10"
54                id="password-minimal"
55                placeholder="Password"
56                type="password"
57              />
58              <button
59                className="-translate-y-1/2 absolute top-1/2 right-4 text-muted-foreground/40 transition-colors hover:text-foreground"
60                title="Toggle visibility"
61                type="button"
62              >
63                <EyeIcon className="size-4" />
64              </button>
65            </div>
66// … truncated