auth-3

1import { cn } from "@/lib/utils";
2import { GithubIcon } from "@/components/icons/github-icon";
3import { GoogleIcon } from "@/components/icons/google-icon";
4import { Logo } from "@/components/logo";
5import { Button } from "@/components/ui/button";
6import {
7	InputGroup,
8	InputGroupAddon,
9	InputGroupInput,
10} from "@/components/ui/input-group";
11import { AuthDivider } from "@/components/auth-divider";
12 
13export function AuthPage() {
14	return (
15		<div className="relative w-full overflow-hidden md:h-screen">
16			<div
17				className={cn(
18					"relative mx-auto flex min-h-screen w-full max-w-sm flex-col justify-between p-6 md:p-8"
19				)}
20			>
21				<div className="flex justify-center">
22					<a href="#">
23						<Logo className="h-4.5" />
24					</a>
25				</div>
26 
27				<div className="fade-in slide-in-from-bottom-4 w-full animate-in space-y-4 duration-600">
28					<div className="flex flex-col space-y-1">
29						<h1 className="font-bold text-2xl tracking-wide">Join Now!</h1>
30						<p className="text-base text-muted-foreground">
31							Login or create your efferd account.
32						</p>
33					</div>
34					<form className="space-y-2">
35						<InputGroup>
36							<InputGroupInput
37								placeholder="your.email@example.com"
38								type="email"
39							/>
40							<InputGroupAddon align="inline-start">
41								<IconPlaceholder
42									hugeicons="AtIcon"
43									lucide="AtSignIcon"
44									phosphor="AtIcon"
45									remixicon="RiAtLine"
46									tabler="IconAt"
47								/>
48							</InputGroupAddon>
49						</InputGroup>
50 
51						<Button className="w-full" size="sm" type="button">
52							Continue With Email
53						</Button>
54					</form>
55					<AuthDivider>OR CONTINUE WITH</AuthDivider>
56					<div className="space-y-2">
57						<Button className="w-full" type="button" variant="outline">
58							<GoogleIcon data-icon="inline-start" />
59							Google
60						</Button>
61						<Button className="w-full" type="button" variant="outline">
62							<GithubIcon data-icon="inline-start" />
63							GitHub
64						</Button>
65					</div>
66				</div>
67 
68				<p className="text-center text-muted-foreground text-sm">
69					This site is protected by reCAPTCHA and the Google{" "}
70					<a
71						className="underline underline-offset-4 hover:text-primary"
72						href="#"
73					>
74						Privacy Policy
75					</a>{" "}
76					and{" "}
77					<a
78						className="underline underline-offset-4 hover:text-primary"
79						href="#"
80					>
81						Terms of Service
82					</a>{" "}
83					apply.
84				</p>
85			</div>
86		</div>
87	);
88}