Skip to content

Commit 0d91e05

Browse files
pan93412pan93412
committed
refactor: rewrite login page
1 parent 06781a6 commit 0d91e05

File tree

2 files changed

+67
-94
lines changed

2 files changed

+67
-94
lines changed

‎app/login/do-you-know.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export default async function DoYouKnow() {
2020

2121
const randomKnow = knowsList[Math.floor(Math.random() * knowsList.length)];
2222
return (
23-
<div className="flex flex-col gap-3">
24-
<div className="text-sm text-gray-500">DO YOU KNOW?</div>
25-
<div className="text-lg leading-6 font-normal">{randomKnow}</div>
23+
<div className="flex flex-col justify-center gap-2 text-center">
24+
<div className="text-sm text-gray-500">你知道嗎？</div>
25+
<div className="font-normal">{randomKnow}</div>
2626
</div>
2727
);
2828
}

‎app/login/page.tsx‎

Lines changed: 64 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -19,107 +19,80 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
1919
const params = await searchParams;
2020

2121
return (
22-
<div className="bg-gradient-to-br from-blue-100 via-white to-blue-50">
23-
<div
24-
className={`
25-
flex min-h-svh flex-col-reverse
26-
lg:flex-row
27-
`}
28-
>
29-
{/* Left Information Panel */}
30-
<div
31-
className={`
32-
flex w-full flex-col justify-between px-8 py-6 backdrop-blur-md
33-
lg:w-[40vw] lg:px-14 lg:py-8
34-
`}
22+
<div
23+
className={`
24+
flex min-h-svh items-center justify-center bg-gradient-to-br
25+
from-blue-100 via-white to-blue-50 px-8 py-6
26+
lg:px-14 lg:py-8
27+
`}
28+
>
29+
<div className="flex max-w-sm flex-1 flex-col justify-center gap-6">
30+
<Link
31+
href="/"
32+
className={`flex items-center gap-2 self-center font-medium`}
3533
>
36-
<div className="flex flex-col gap-6">
37-
{/* Placeholder Image */}
38-
<div
39-
className={`
40-
h-[200px] w-full rounded-lg bg-stone-300
41-
lg:h-[297px]
42-
`}
43-
/>
44-
45-
{/* Information Section */}
46-
<DoYouKnow />
34+
<div
35+
className={`
36+
flex size-6 items-center justify-center rounded-md
37+
text-primary-foreground
38+
`}
39+
>
40+
<Logo />
4741
</div>
42+
資料庫練功坊
43+
</Link>
44+
<LoginForm
45+
error={params.error}
46+
errorDescription={params.error_description}
47+
message={params.message}
48+
/>
49+
50+
{/* Do You Know */}
51+
<DoYouKnow />
4852

49-
{/* Bottom Section */}
50-
<div className="flex flex-col gap-4">
51-
{/* Status and Navigation */}
52-
<div
53-
className={`
54-
flex flex-wrap items-center gap-4
55-
lg:gap-8
56-
`}
57-
>
58-
<Suspense fallback={<UpstreamStatusPlaceholder />}>
59-
<UpstreamStatus />
60-
</Suspense>
53+
{/* Bottom Section */}
54+
<div className="flex flex-col items-center gap-4">
55+
{/* Status and Navigation */}
56+
<div
57+
className={`
58+
flex flex-wrap items-center gap-4
59+
lg:gap-8
60+
`}
61+
>
62+
<Suspense fallback={<UpstreamStatusPlaceholder />}>
63+
<UpstreamStatus />
64+
</Suspense>
6165

62-
<div className="h-6 w-px bg-stone-400" />
66+
<div className="h-6 w-px bg-stone-400" />
6367

64-
<div className="flex items-center gap-4">
65-
<Tooltip>
66-
<TooltipTrigger>
67-
<a
68-
className="flex items-center gap-2"
69-
href="https://github.com/database-playground"
70-
target="_blank"
68+
<div className="flex items-center gap-4">
69+
<Tooltip>
70+
<TooltipTrigger>
71+
<a
72+
className="flex items-center gap-2"
73+
href="https://github.com/database-playground"
74+
target="_blank"
75+
>
76+
<svg
77+
className="h-3.5 w-3.5"
78+
role="img"
79+
viewBox="0 0 24 24"
80+
xmlns="http://www.w3.org/2000/svg"
7181
>
72-
<svg
73-
className="h-3.5 w-3.5"
74-
role="img"
75-
viewBox="0 0 24 24"
76-
xmlns="http://www.w3.org/2000/svg"
77-
>
78-
<title>GitHub</title>
79-
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
80-
</svg>
81-
<span className="text-sm">GitHub</span>
82-
</a>
83-
</TooltipTrigger>
82+
<title>GitHub</title>
83+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
84+
</svg>
85+
<span className="text-sm">GitHub</span>
86+
</a>
87+
</TooltipTrigger>
8488

85-
<TooltipContent>
86-
向 GitHub 貢獻程式碼，每次都能直接獲得 200 - 700 點不等的點數！
87-
</TooltipContent>
88-
</Tooltip>
89-
</div>
89+
<TooltipContent>
90+
向 GitHub 貢獻程式碼，每次都能直接獲得 200 - 700 點不等的點數！
91+
</TooltipContent>
92+
</Tooltip>
9093
</div>
9194
</div>
9295
</div>
93-
94-
{/* Right Login Area */}
95-
<div
96-
className={`
97-
flex flex-1 flex-col items-center justify-center gap-6 px-8 py-6
98-
lg:px-14 lg:py-8
99-
`}
100-
>
101-
<div className="flex w-full max-w-sm flex-col gap-6">
102-
<Link
103-
href="/"
104-
className={`flex items-center gap-2 self-center font-medium`}
105-
>
106-
<div
107-
className={`
108-
flex size-6 items-center justify-center rounded-md
109-
text-primary-foreground
110-
`}
111-
>
112-
<Logo />
113-
</div>
114-
資料庫練功坊
115-
</Link>
116-
<LoginForm
117-
error={params.error}
118-
errorDescription={params.error_description}
119-
message={params.message}
120-
/>
121-
</div>
122-
</div>
12396
</div>
12497
</div>
12598
);

0 commit comments

Comments
 (0)