{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snake-game",
  "type": "registry:block",
  "title": "Snake game",
  "description": "Snake game",
  "files": [
    {
      "path": "components/usages/snakeusage.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport Board from \"@/registry/open-source/snake-game/Board\";\nimport GameControls from \"@/registry/open-source/snake-game/GameControls\";\nimport GameOverPopup from \"@/registry/open-source/snake-game/GameOverPopup\";\nimport {\n\tAPPLE_START,\n\tappleAte,\n\tBOARD_SIZE,\n\tcheckCollision,\n\tDIRECTIONS,\n\tgenerateApple,\n\tgetRandomColor,\n\tSNAKE_START,\n\tSPEED,\n} from \"@/registry/open-source/snake-game/utils\";\n\nconst Game: React.FC = () => {\n\tconst [snake, setSnake] = useState(SNAKE_START);\n\tconst [apple, setApple] = useState(APPLE_START);\n\tconst [dir, setDir] = useState<{ x: number; y: number }>(DIRECTIONS[39]);\n\tconst [speed, setSpeed] = useState<number | null>(null);\n\tconst [gameOver, setGameOver] = useState(false);\n\tconst [score, setScore] = useState(0);\n\tconst [highScore, setHighScore] = useState(0);\n\tconst [isDarkMode, setIsDarkMode] = useState(false);\n\tconst [isRainbowMode, setIsRainbowMode] = useState(false);\n\tconst [rainbowColors, setRainbowColors] = useState<string[]>([]);\n\n\tconst moveSnake = useCallback(() => {\n\t\tconst newSnake = [...snake];\n\t\tconst newSnakeHead = {\n\t\t\tx: newSnake[0].x + dir.x,\n\t\t\ty: newSnake[0].y + dir.y,\n\t\t};\n\n\t\tif (\n\t\t\tnewSnakeHead.x < 0 ||\n\t\t\tnewSnakeHead.x >= BOARD_SIZE ||\n\t\t\tnewSnakeHead.y < 0 ||\n\t\t\tnewSnakeHead.y >= BOARD_SIZE ||\n\t\t\tcheckCollision(newSnakeHead, snake)\n\t\t) {\n\t\t\tsetGameOver(true);\n\t\t\treturn;\n\t\t}\n\n\t\tnewSnake.unshift(newSnakeHead);\n\t\tif (appleAte(newSnake, apple)) {\n\t\t\tsetApple(generateApple(newSnake));\n\t\t\tsetScore((prevScore) => prevScore + 1);\n\t\t} else {\n\t\t\tnewSnake.pop();\n\t\t}\n\t\tsetSnake(newSnake);\n\t}, [snake, dir, apple]);\n\n\tconst startGame = useCallback(() => {\n\t\tsetSnake(SNAKE_START);\n\t\tsetApple(APPLE_START);\n\t\tsetDir(DIRECTIONS[39]);\n\t\tsetSpeed(SPEED);\n\t\tsetGameOver(false);\n\t\tsetScore(0);\n\t\tsetRainbowColors(Array(SNAKE_START.length).fill(\"\").map(getRandomColor));\n\t}, []);\n\n\tconst toggleTheme = () => {\n\t\tsetIsDarkMode((prev) => !prev);\n\t};\n\n\tconst toggleRainbow = () => {\n\t\tsetIsRainbowMode((prev) => !prev);\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst key = e.keyCode;\n\t\t\tif (key >= 37 && key <= 40) {\n\t\t\t\tsetDir(DIRECTIONS[key]);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (gameOver) {\n\t\t\tsetSpeed(null);\n\t\t\tsetHighScore((prev) => Math.max(prev, score));\n\t\t}\n\t}, [gameOver, score]);\n\n\tuseEffect(() => {\n\t\tif (!gameOver && speed) {\n\t\t\tconst interval = setInterval(moveSnake, speed);\n\t\t\treturn () => clearInterval(interval);\n\t\t}\n\t}, [moveSnake, gameOver, speed]);\n\n\tuseEffect(() => {\n\t\tif (isRainbowMode) {\n\t\t\tconst interval = setInterval(() => {\n\t\t\t\tsetRainbowColors((prev) => {\n\t\t\t\t\tconst newColors = [...prev];\n\t\t\t\t\tnewColors.pop();\n\t\t\t\t\tnewColors.unshift(getRandomColor());\n\t\t\t\t\treturn newColors;\n\t\t\t\t});\n\t\t\t}, 200);\n\t\t\treturn () => clearInterval(interval);\n\t\t}\n\t}, [isRainbowMode]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`flex flex-col items-center justify-center min-h-screen ${\n\t\t\t\tisDarkMode ? \"bg-background text-secondary\" : \"bg-background text-secondary\"\n\t\t\t}`}\n\t\t>\n\t\t\t<h1 className=\"text-4xl font-bold mb-4\">Snake Game</h1>\n\t\t\t<div className=\"mb-4 text-xl\">\n\t\t\t\t<span className=\"mr-4\">Score: {score}</span>\n\t\t\t\t<span>High Score: {highScore}</span>\n\t\t\t</div>\n\t\t\t<Board\n\t\t\t\tsnakeDots={snake}\n\t\t\t\tapple={apple}\n\t\t\t\tisRainbowMode={isRainbowMode}\n\t\t\t\trainbowColors={rainbowColors}\n\t\t\t/>\n\t\t\t{gameOver && (\n\t\t\t\t<GameOverPopup\n\t\t\t\t\tscore={score}\n\t\t\t\t\tonRestart={startGame}\n\t\t\t\t\tisDarkMode={isDarkMode}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<GameControls\n\t\t\t\tonStartGame={startGame}\n\t\t\t\tonToggleTheme={toggleTheme}\n\t\t\t\tonToggleRainbow={toggleRainbow}\n\t\t\t\tisDarkMode={isDarkMode}\n\t\t\t\tisRainbowMode={isRainbowMode}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Game;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/snakeusage.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport Board from \"@/registry/open-source/snake-game/Board\";\nimport GameControls from \"@/registry/open-source/snake-game/GameControls\";\nimport GameOverPopup from \"@/registry/open-source/snake-game/GameOverPopup\";\nimport {\n\tAPPLE_START,\n\tappleAte,\n\tBOARD_SIZE,\n\tcheckCollision,\n\tDIRECTIONS,\n\tgenerateApple,\n\tgetRandomColor,\n\tSNAKE_START,\n\tSPEED,\n} from \"@/registry/open-source/snake-game/utils\";\n\nconst Game: React.FC = () => {\n\tconst [snake, setSnake] = useState(SNAKE_START);\n\tconst [apple, setApple] = useState(APPLE_START);\n\tconst [dir, setDir] = useState<{ x: number; y: number }>(DIRECTIONS[39]);\n\tconst [speed, setSpeed] = useState<number | null>(null);\n\tconst [gameOver, setGameOver] = useState(false);\n\tconst [score, setScore] = useState(0);\n\tconst [highScore, setHighScore] = useState(0);\n\tconst [isDarkMode, setIsDarkMode] = useState(false);\n\tconst [isRainbowMode, setIsRainbowMode] = useState(false);\n\tconst [rainbowColors, setRainbowColors] = useState<string[]>([]);\n\n\tconst moveSnake = useCallback(() => {\n\t\tconst newSnake = [...snake];\n\t\tconst newSnakeHead = {\n\t\t\tx: newSnake[0].x + dir.x,\n\t\t\ty: newSnake[0].y + dir.y,\n\t\t};\n\n\t\tif (\n\t\t\tnewSnakeHead.x < 0 ||\n\t\t\tnewSnakeHead.x >= BOARD_SIZE ||\n\t\t\tnewSnakeHead.y < 0 ||\n\t\t\tnewSnakeHead.y >= BOARD_SIZE ||\n\t\t\tcheckCollision(newSnakeHead, snake)\n\t\t) {\n\t\t\tsetGameOver(true);\n\t\t\treturn;\n\t\t}\n\n\t\tnewSnake.unshift(newSnakeHead);\n\t\tif (appleAte(newSnake, apple)) {\n\t\t\tsetApple(generateApple(newSnake));\n\t\t\tsetScore((prevScore) => prevScore + 1);\n\t\t} else {\n\t\t\tnewSnake.pop();\n\t\t}\n\t\tsetSnake(newSnake);\n\t}, [snake, dir, apple]);\n\n\tconst startGame = useCallback(() => {\n\t\tsetSnake(SNAKE_START);\n\t\tsetApple(APPLE_START);\n\t\tsetDir(DIRECTIONS[39]);\n\t\tsetSpeed(SPEED);\n\t\tsetGameOver(false);\n\t\tsetScore(0);\n\t\tsetRainbowColors(Array(SNAKE_START.length).fill(\"\").map(getRandomColor));\n\t}, []);\n\n\tconst toggleTheme = () => {\n\t\tsetIsDarkMode((prev) => !prev);\n\t};\n\n\tconst toggleRainbow = () => {\n\t\tsetIsRainbowMode((prev) => !prev);\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst key = e.keyCode;\n\t\t\tif (key >= 37 && key <= 40) {\n\t\t\t\tsetDir(DIRECTIONS[key]);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (gameOver) {\n\t\t\tsetSpeed(null);\n\t\t\tsetHighScore((prev) => Math.max(prev, score));\n\t\t}\n\t}, [gameOver, score]);\n\n\tuseEffect(() => {\n\t\tif (!gameOver && speed) {\n\t\t\tconst interval = setInterval(moveSnake, speed);\n\t\t\treturn () => clearInterval(interval);\n\t\t}\n\t}, [moveSnake, gameOver, speed]);\n\n\tuseEffect(() => {\n\t\tif (isRainbowMode) {\n\t\t\tconst interval = setInterval(() => {\n\t\t\t\tsetRainbowColors((prev) => {\n\t\t\t\t\tconst newColors = [...prev];\n\t\t\t\t\tnewColors.pop();\n\t\t\t\t\tnewColors.unshift(getRandomColor());\n\t\t\t\t\treturn newColors;\n\t\t\t\t});\n\t\t\t}, 200);\n\t\t\treturn () => clearInterval(interval);\n\t\t}\n\t}, [isRainbowMode]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`flex flex-col items-center justify-center min-h-screen ${\n\t\t\t\tisDarkMode ? \"bg-background text-secondary\" : \"bg-background text-secondary\"\n\t\t\t}`}\n\t\t>\n\t\t\t<h1 className=\"text-4xl font-bold mb-4\">Snake Game</h1>\n\t\t\t<div className=\"mb-4 text-xl\">\n\t\t\t\t<span className=\"mr-4\">Score: {score}</span>\n\t\t\t\t<span>High Score: {highScore}</span>\n\t\t\t</div>\n\t\t\t<Board\n\t\t\t\tsnakeDots={snake}\n\t\t\t\tapple={apple}\n\t\t\t\tisRainbowMode={isRainbowMode}\n\t\t\t\trainbowColors={rainbowColors}\n\t\t\t/>\n\t\t\t{gameOver && (\n\t\t\t\t<GameOverPopup\n\t\t\t\t\tscore={score}\n\t\t\t\t\tonRestart={startGame}\n\t\t\t\t\tisDarkMode={isDarkMode}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<GameControls\n\t\t\t\tonStartGame={startGame}\n\t\t\t\tonToggleTheme={toggleTheme}\n\t\t\t\tonToggleRainbow={toggleRainbow}\n\t\t\t\tisDarkMode={isDarkMode}\n\t\t\t\tisRainbowMode={isRainbowMode}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Game;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/snake-game/Board.tsx",
      "content": "import type React from \"react\";\r\n\r\nimport { BOARD_SIZE, getSnakeColor, SCALE } from \"./utils\";\r\n\r\ninterface BoardProps {\r\n\tsnakeDots: { x: number; y: number }[];\r\n\tapple: { x: number; y: number };\r\n\tisRainbowMode: boolean;\r\n\trainbowColors: string[];\r\n}\r\n\r\nconst Board: React.FC<BoardProps> = ({\r\n\tsnakeDots,\r\n\tapple,\r\n\tisRainbowMode,\r\n\trainbowColors,\r\n}) => {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: `${BOARD_SIZE * SCALE}px`,\r\n\t\t\t\theight: `${BOARD_SIZE * SCALE}px`,\r\n\t\t\t\tborder: \"1px solid #000\",\r\n\t\t\t\tposition: \"relative\",\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{snakeDots.map((dot, i) => (\r\n\t\t\t\t<div\r\n\t\t\t\t\tkey={i + \"board\"}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\t\twidth: `${SCALE}px`,\r\n\t\t\t\t\t\theight: `${SCALE}px`,\r\n\t\t\t\t\t\tbackgroundColor: getSnakeColor(\r\n\t\t\t\t\t\t\ti,\r\n\t\t\t\t\t\t\tisRainbowMode,\r\n\t\t\t\t\t\t\trainbowColors\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t\tleft: `${dot.x * SCALE}px`,\r\n\t\t\t\t\t\ttop: `${dot.y * SCALE}px`,\r\n\t\t\t\t\t\tzIndex: snakeDots.length - i,\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t))}\r\n\t\t\t<div\r\n\t\t\t\tstyle={{\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\twidth: `${SCALE}px`,\r\n\t\t\t\t\theight: `${SCALE}px`,\r\n\t\t\t\t\tbackgroundColor: \"red\",\r\n\t\t\t\t\tleft: `${apple.x * SCALE}px`,\r\n\t\t\t\t\ttop: `${apple.y * SCALE}px`,\r\n\t\t\t\t}}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default Board;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/snake-game/utils.ts",
      "content": "export const BOARD_SIZE = 20\nexport const SNAKE_START = [\n    { x: 10, y: 10 },\n    { x: 10, y: 11 },\n]\nexport const APPLE_START = { x: 5, y: 5 }\nexport const SCALE = 20\nexport const SPEED = 100\nexport const DIRECTIONS = {\n    38: { x: 0, y: -1 }, // up\n    40: { x: 0, y: 1 }, // down\n    37: { x: -1, y: 0 }, // left\n    39: { x: 1, y: 0 }, // right\n}\n\nexport const checkCollision = (piece: { x: number; y: number }, snakeArray: { x: number; y: number }[]) =>\n    snakeArray.some((segment) => segment.x === piece.x && segment.y === piece.y)\n\nexport const appleAte = (newSnake: { x: number; y: number }[], apple: { x: number; y: number }) =>\n    newSnake[0].x === apple.x && newSnake[0].y === apple.y\n\nexport const generateApple = (snake: { x: number; y: number }[]) => {\n    let newApple\n    do {\n        newApple = {\n            x: Math.floor(Math.random() * BOARD_SIZE),\n            y: Math.floor(Math.random() * BOARD_SIZE),\n        }\n    } while (checkCollision(newApple, snake))\n    return newApple\n}\n\nexport const getRandomColor = () => {\n    return `hsl(${Math.random() * 360}, 100%, 50%)`\n}\n\nexport const getSnakeColor = (index: number, isRainbow: boolean, rainbowColors: string[]) => {\n    if (isRainbow) {\n        return rainbowColors[index % rainbowColors.length]\n    }\n    return index === 0 ? \"#00ff00\" : \"#00cc00\"\n}\n\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/snake-game/GameControls.tsx",
      "content": "import type React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Moon, Rainbow, Sun } from \"lucide-react\";\n\ninterface GameControlsProps {\n\tonStartGame: () => void;\n\tonToggleTheme: () => void;\n\tonToggleRainbow: () => void;\n\tisDarkMode: boolean;\n\tisRainbowMode: boolean;\n}\n\nconst GameControls: React.FC<GameControlsProps> = ({\n\tonStartGame,\n\tonToggleTheme,\n\tonToggleRainbow,\n\tisDarkMode,\n\tisRainbowMode,\n}) => {\n\treturn (\n\t\t<div className=\"flex flex-col sm:flex-row items-center justify-center gap-4 mt-4\">\n\t\t\t<Button\n\t\t\t\tonClick={onStartGame}\n\t\t\t\tvariant=\"default\"\n\t\t\t\tclassName={\n\t\t\t\t\tisDarkMode ? \"bg-background hover:bg-background text-foreground\" : \"\"\n\t\t\t\t}\n\t\t\t>\n\t\t\t\tStart Game\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tonClick={onToggleTheme}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tclassName={\n\t\t\t\t\tisDarkMode\n\t\t\t\t\t\t? \"bg-background hover:bg-background text-foreground border-gray-600\"\n\t\t\t\t\t\t: \"\"\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{isDarkMode ? (\n\t\t\t\t\t<Sun className=\"h-4 w-4\" />\n\t\t\t\t) : (\n\t\t\t\t\t<Moon className=\"h-4 w-4\" />\n\t\t\t\t)}\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tonClick={onToggleRainbow}\n\t\t\t\tvariant={isRainbowMode ? \"default\" : \"outline-solid\"}\n\t\t\t\tclassName={`\n          ${\n\t\t\t\t\tisDarkMode && !isRainbowMode\n\t\t\t\t\t\t? \"bg-background hover:bg-background text-foreground border-gray-600\"\n\t\t\t\t\t\t: \"\"\n\t\t\t\t}\n          ${\n\t\t\t\t\tisRainbowMode\n\t\t\t\t\t\t? \"bg-linear-to-r from-red-500 via-yellow-500 to-blue-500\"\n\t\t\t\t\t\t: \"\"\n\t\t\t\t}\n        `}\n\t\t\t>\n\t\t\t\t<Rainbow className=\"h-4 w-4\" />\n\t\t\t</Button>\n\t\t</div>\n\t);\n};\n\nexport default GameControls;\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/snake-game/GameOverPopup.tsx",
      "content": "import type React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\n\ninterface GameOverPopupProps {\n\tscore: number;\n\tonRestart: () => void;\n\tisDarkMode: boolean;\n}\n\nconst GameOverPopup: React.FC<GameOverPopupProps> = ({\n\tscore,\n\tonRestart,\n\tisDarkMode,\n}) => {\n\treturn (\n\t\t<div className=\"fixed inset-0 bg-background bg-opacity-50 flex items-center justify-center z-50\">\n\t\t\t<div\n\t\t\t\tclassName={`${\n\t\t\t\t\tisDarkMode ? \"bg-background text-foreground\" : \"bg-background text-foreground\"\n\t\t\t\t} p-8 rounded-lg shadow-lg text-center`}\n\t\t\t>\n\t\t\t\t<h2 className=\"text-3xl font-bold mb-4\">Game Over</h2>\n\t\t\t\t<p className=\"text-xl mb-6\">Your score: {score}</p>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={onRestart}\n\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\tclassName={`px-6 py-2 ${\n\t\t\t\t\t\tisDarkMode ? \"bg-background hover:bg-background text-foreground\" : \"\"\n\t\t\t\t\t}`}\n\t\t\t\t>\n\t\t\t\t\tPlay Again\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default GameOverPopup;\n",
      "type": "registry:ui"
    }
  ]
}