8-bit Main Menu

1import { cn } from "@/lib/utils";
2 
3import { Button } from "@/components/ui/8bit/button";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/8bit/card";
11 
12const menuItems = [
13  {
14    label: "START GAME",
15    action: () => console.log("Starting game..."),
16  },
17  {
18    label: "OPTIONS",
19    action: () => console.log("Showing options..."),
20  },
21  {
22    label: "HIGH SCORES",
23    action: () => console.log("Showing high scores..."),
24  },
25  {
26    label: "MULTIPLAYER",
27    action: () => console.log("Multiplayer mode..."),
28  },
29  { label: "QUIT", action: () => console.log("Quitting game...") },
30];
31 
32export default function MainMenu({
33  className,
34  ...props
35}: React.ComponentProps<"div">) {
36  return (
37    <Card className={cn(className)} {...props}>
38      <CardHeader className="flex flex-col items-center justify-center gap-2">
39        <CardTitle>Main Menu</CardTitle>
40        <CardDescription>Retro 8-bit Quest</CardDescription>
41      </CardHeader>
42      <CardContent>
43        <div className="flex flex-col gap-4">
44          {menuItems.map((item) => (
45            <Button key={item.label} className="flex items-center gap-2">
46              <span>{item.label}</span>
47            </Button>
48          ))}
49        </div>
50      </CardContent>
51    </Card>
52  );
53}