auth-2

1import { cn } from "@/lib/utils";
2import { GithubIcon } from "@/components/icons/github-icon";
3import { GoogleIcon } from "@/components/icons/google-icon";
4import { Button } from "@/components/ui/button";
5import {
6	InputGroup,
7	InputGroupAddon,
8	InputGroupInput,
9} from "@/components/ui/input-group";
10import { AuthDivider } from "@/components/auth-divider";
11import { DecorIcon } from "@/components/decor-icon";
12 
13export function AuthPage() {
14	return (
15		<div className="relative flex h-screen w-full items-center justify-center overflow-hidden px-6 md:px-8">
16			<div
17				className={cn(
18					"relative flex w-full max-w-sm flex-col justify-between p-6 md:p-8",
19					"dark:bg-[radial-gradient(50%_80%_at_20%_0%,--theme(--color-foreground/.1),transparent)]"
20				)}
21			>
22				<div className="absolute -inset-y-6 -left-px w-px bg-border" />
23				<div className="absolute -inset-y-6 -right-px w-px bg-border" />
24				<div className="absolute -inset-x-6 -top-px h-px bg-border" />
25				<div className="absolute -inset-x-6 -bottom-px h-px bg-border" />
26				<DecorIcon position="top-left" />
27				<DecorIcon position="bottom-right" />
28 
29				<div className="w-full max-w-sm animate-in space-y-8">
30					<div className="flex flex-col space-y-1">
31						<h1 className="font-bold text-2xl tracking-wide">Join Now!</h1>
32						<p className="text-base text-muted-foreground">
33							Login or create your efferd account.
34						</p>
35					</div>
36					<div className="space-y-4">
37						<form className="space-y-2">
38							<InputGroup>
39								<InputGroupInput
40									placeholder="your.email@example.com"
41									type="email"
42								/>
43								<InputGroupAddon align="inline-start">
44									<IconPlaceholder
45										hugeicons="AtIcon"
46										lucide="AtSignIcon"
47										phosphor="AtIcon"
48										remixicon="RiAtLine"
49										tabler="IconAt"
50									/>
51								</InputGroupAddon>
52							</InputGroup>
53 
54							<Button className="w-full" size="sm" type="button">
55								Continue With Email
56							</Button>
57						</form>
58						<AuthDivider>OR</AuthDivider>
59						<div className="grid grid-cols-2 gap-2 space-y-2">
60							<Button className="w-full" type="button" variant="outline">
61								<GoogleIcon data-icon="inline-start" />
62								Google
63							</Button>
64							<Button className="w-full" type="button" variant="outline">
65								<GithubIcon data-icon="inline-start" />
66								GitHub
67							</Button>
68						</div>
69					</div>
70					<p className="text-muted-foreground text-sm">
71// … truncated