26 lines
1.7 KiB
TypeScript
26 lines
1.7 KiB
TypeScript
import { redirect } from "next/navigation";
|
||
import { requireCurrentUser } from "@/lib/auth/user-session";
|
||
import { saveFirstName } from "./actions";
|
||
|
||
export default async function WelcomePage({ searchParams }: { searchParams: Promise<{ error?: string }> }) {
|
||
const user = await requireCurrentUser("/welcome");
|
||
const query = await searchParams;
|
||
if (user.firstName) redirect("/welcome/minecraft");
|
||
|
||
return (
|
||
<main className="grid min-h-screen place-items-center bg-canvas px-6 py-12 text-ink">
|
||
<section className="w-full max-w-2xl border border-line bg-panel p-8 shadow-[10px_10px_0_var(--color-shadow)] sm:p-12">
|
||
<p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Step 1 / 3 · Discord connected</p>
|
||
<h1 className="mt-5 font-display text-5xl font-black uppercase leading-none tracking-tight">Welcome, {user.discordUsername}.</h1>
|
||
<p className="mt-6 max-w-xl text-lg leading-8 text-muted">Let’s get started. What should we call you?</p>
|
||
<form action={saveFirstName} className="mt-9">
|
||
<label className="font-mono text-xs font-bold uppercase tracking-wider" htmlFor="firstName">Your first name</label>
|
||
<input className="mt-3 w-full border border-line bg-canvas px-4 py-4 text-lg outline-none focus:border-accent" id="firstName" maxLength={50} name="firstName" required autoFocus />
|
||
{query.error && <p className="mt-3 text-sm text-accent">Enter a name between 1 and 50 characters.</p>}
|
||
<button className="mt-7 border border-ink bg-ink px-6 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas hover:bg-accent" type="submit">Continue</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|