8-bit Pause Menu

1import { Pause, Power, RotateCcw } from "lucide-react";
2 
3import { cn } from "@/lib/utils";
4 
5import { Button } from "@/components/ui/8bit/button";
6import {
7  Card,
8  CardContent,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/8bit/card";
12 
13const menuItems = [
14  {
15    label: "RESUME",
16    icon: Pause,
17    action: () => console.log("Resuming game..."),
18  },
19  {
20    label: "RESTART",
21    icon: RotateCcw,
22    action: () => console.log("Restarting game..."),
23  },
24  {
25    label: "QUIT",
26    icon: Power,
27    action: () => console.log("Quitting game..."),
28  },
29];
30 
31export default function PauseMenu({
32  className,
33  ...props
34}: React.ComponentProps<"div">) {
35  return (
36    <Card className={cn(className)} {...props}>
37      <CardHeader className="flex flex-col items-center justify-center gap-2">
38        <CardTitle>Paused</CardTitle>
39      </CardHeader>
40      <CardContent>
41        <div className="flex flex-col gap-8">
42          {menuItems.map((item) => (
43            <Button key={item.label} className="flex items-center gap-2">
44              <item.icon className="size-4" />
45              <span>{item.label}</span>
46            </Button>
47          ))}
48        </div>
49      </CardContent>
50    </Card>
51  );
52}