this repo has no description
feat(design): rewrite auth
+58
-33
+6
.vscode/settings.json
+6
.vscode/settings.json
+52
-33
src/app/auth/page.tsx
+52
-33
src/app/auth/page.tsx
···
1
-
"use client";
2
-
3
1
import {
4
-
Card,
5
-
CardContent,
6
-
CardDescription,
7
-
CardHeader,
8
-
CardTitle,
9
-
} from "@/components/ui/card";
10
-
import { Button } from "@/components/ui/button";
2
+
AppleIcon,
3
+
GoogleIcon,
4
+
TicketStarIcon,
5
+
} from "@hugeicons/core-free-icons";
11
6
import { HugeiconsIcon } from "@hugeicons/react";
12
-
import { Field, FieldLabel } from "@/components/ui/field";
7
+
import { Button } from "@/components/ui/button";
8
+
import {
9
+
Field,
10
+
FieldDescription,
11
+
FieldGroup,
12
+
FieldLabel,
13
+
FieldSeparator,
14
+
} from "@/components/ui/field";
13
15
import { Input } from "@/components/ui/input";
14
-
import { TicketStarIcon } from "@hugeicons/core-free-icons";
15
16
16
-
export default function Page() {
17
+
export default function Auth() {
17
18
return (
18
-
<Card className="ring-0">
19
-
<CardHeader>
20
-
<Button variant="secondary" size="icon">
21
-
<HugeiconsIcon icon={TicketStarIcon} />
22
-
</Button>
23
-
<CardTitle>Welcome back</CardTitle>
24
-
<CardDescription>Sign in to continue to Vouch.</CardDescription>
25
-
</CardHeader>
26
-
<CardContent className="space-y-6">
27
-
<Field>
28
-
<FieldLabel>Email</FieldLabel>
29
-
<Input placeholder="you@example.com" />
30
-
</Field>
31
-
<Field>
32
-
<FieldLabel>Password</FieldLabel>
33
-
<Input type="password" placeholder="********" />
34
-
</Field>
35
-
<Button className="w-full">Sign In</Button>
36
-
<Button variant="link">No account? Sign Up</Button>
37
-
</CardContent>
38
-
</Card>
19
+
<div className="flex flex-col h-screen justify-center gap-6">
20
+
<form>
21
+
<FieldGroup>
22
+
<div className="flex flex-col items-center gap-2">
23
+
<HugeiconsIcon icon={TicketStarIcon} className="size-6" />
24
+
<h1 className="text-xl font-bold">Welcome to Vouch.</h1>
25
+
<FieldDescription>
26
+
Sign in to your account to continue.
27
+
</FieldDescription>
28
+
</div>
29
+
<Field>
30
+
<FieldLabel htmlFor="email">Email</FieldLabel>
31
+
<Input
32
+
id="email"
33
+
type="email"
34
+
placeholder="alexandre@hallaine.com"
35
+
required
36
+
/>
37
+
</Field>
38
+
<Field>
39
+
<Button type="submit">Login</Button>
40
+
</Field>
41
+
<FieldSeparator>Or</FieldSeparator>
42
+
<Field className="grid gap-4 sm:grid-cols-2">
43
+
<Button variant="outline" type="button">
44
+
<HugeiconsIcon icon={AppleIcon} className="size-6" />
45
+
Continue with Apple
46
+
</Button>
47
+
<Button variant="outline" type="button">
48
+
<HugeiconsIcon icon={GoogleIcon} className="size-6" />
49
+
Continue with Google
50
+
</Button>
51
+
</Field>
52
+
</FieldGroup>
53
+
</form>
54
+
{/* <FieldDescription className="px-6 text-center">
55
+
By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
56
+
</FieldDescription> */}
57
+
</div>
39
58
);
40
59
}