1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
'use client';
import { baseOptions, linkItems } from '@/app/(main)/layout.config';
import { Icons } from '@/components/icons/icons';
import { Header } from '@/components/sections/header';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { signIn } from '@/lib/auth-client';
import { cn } from '@/lib/utils';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { getLinks } from 'fumadocs-ui/layouts/shared';
import { PlusIcon } from 'lucide-react';
const Cross = () => (
<div className='relative h-6 w-6'>
<div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 bg-background'>
<PlusIcon size={20} className='text-border/70 dark:text-border' />
</div>
</div>
);
function SignInCard() {
return (
<Card className='relative w-full max-w-xl rounded-none border border-border/70 border-dashed shadow-none dark:border-border'>
<div className='-top-3 -left-3 absolute z-10 hidden h-6 sm:block'>
<Cross />
</div>
<div className='-top-3 -right-3 -translate-x-px absolute z-10 hidden h-6 sm:block'>
<Cross />
</div>
<CardHeader>
<CardTitle className='text-lg md:text-xl'>Sign In</CardTitle>
<CardDescription className='text-xs md:text-sm'>
Sign in with your account
</CardDescription>
</CardHeader>
<CardContent>
<div className='grid gap-4'>
<div
className={cn(
'flex w-full items-center gap-2',
'flex-col justify-between',
)}
>
<Button
variant='outline'
className={cn(
'w-full gap-2 rounded-none border border-border/70 border-dashed dark:border-border',
)}
onClick={async () => {
await signIn.social({
provider: 'google',
callbackURL: '/',
});
}}
>
<Icons.google />
Sign in with Google
</Button>
<Button
variant='outline'
className={cn(
'w-full gap-2 rounded-none border border-border/70 border-dashed dark:border-border',
)}
onClick={async () => {
await signIn.social({
provider: 'github',
callbackURL: '/',
});
}}
>
<Icons.gitHub />
Sign in with Github
</Button>
</div>
</div>
</CardContent>
<div className='-bottom-3 -left-3 absolute z-10 hidden h-6 sm:block'>
<Cross />
</div>
<div className='-bottom-3 -right-3 -translate-x-px absolute z-10 hidden h-6 sm:block'>
<Cross />
</div>
</Card>
);
}
export default function LoginPage() {
return (
<HomeLayout
{...baseOptions}
links={linkItems}
nav={{
component: (
<Header
finalLinks={getLinks(linkItems, baseOptions.githubUrl)}
{...baseOptions}
/>
),
}}
className='border-grid pt-0'
>
<main className='flex flex-1 px-4 sm:px-8 md:px-12 lg:px-16 2xl:px-24'>
<div className='container flex min-h-full flex-1 items-center justify-center border-border/70 border-x border-b border-dashed dark:border-border'>
<SignInCard />
</div>
</main>
</HomeLayout>
);
}
|
