71 lines
2.2 KiB
TypeScript

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Sparkles, Users, Plus } from "lucide-react";
import LobbyDialog from "../_components/lobby/lobby-dialog";
import { auth } from "@/server/auth";
import { Icons } from "@/components/icons";
import { appConfig } from "@/app.config";
export default async function QuizGameStartPage() {
const session = await auth();
return (
<>
<div className="mb-8 flex flex-col items-center justify-center gap-2 pt-12 text-center">
<Icons.logo className="animate-puls text-primary h-10 w-10" />
<h1 className="from-primary to-secondary bg-gradient-to-b bg-clip-text text-5xl font-black tracking-tight text-transparent uppercase">
{appConfig.name}
</h1>
<p className="text-lg font-medium text-indigo-200">
{appConfig.description}
</p>
</div>
{/* Game card */}
<div className="container-bg max-w-md p-8">
{/* Create Lobby Button */}
<div className="space-y-6">
{session ? (
<LobbyDialog
buttonProps={{
className: "text-shadow-primary w-full",
size: "xxl",
variant: "party",
}}
/>
) : (
<Button
size={"xxl"}
variant={"party"}
asChild
className="text-shadow-primary w-full font-black uppercase"
>
<Link href={"/api/auth/signin"}>Sign-in to create a Lobby</Link>
</Button>
)}
{/* Join Lobby Button */}
<Button
size={"xxl"}
variant={"party"}
className="w-full rounded-xl bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700"
>
<Users className="mr-2 h-6 w-6" />
Join Lobby
</Button>
{/* Quick Play Option */}
<div className="border-t border-white/10 pt-4">
<Button
variant="ghost"
className="w-full text-indigo-200 hover:bg-white/10 hover:text-white"
>
Quick Play
</Button>
</div>
</div>
</div>
</>
);
}