auth-4

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