My App

{"/styles.css":{"code":".app {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: #333;\n}"},"/App.js":{"code":"import { useState, useEffect } from \"react\";\n\nexport default function RandomCard() {\n const suits = [\n { symbol: \"♠\", color: \"text-black\" },\n { symbol: \"♥\", color: \"text-red-600\" },\n { symbol: \"♦\", color: \"text-red-600\" },\n { symbol: \"♣\", color: \"text-black\" },\n ];\n\n const values = [\n \"A\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\",\n \"8\", \"9\", \"10\", \"J\", \"Q\", \"K\",\n ];\n\n const getRandomCard = () => {\n const suit = suits[Math.floor(Math.random() * suits.length)];\n const value = values[Math.floor(Math.random() * values.length)];\n\n return {\n suit: suit.symbol,\n value,\n color: suit.color,\n };\n };\n\n const [card, setCard] = useState(getRandomCard());\n\n useEffect(() => {\n setCard(getRandomCard());\n }, []);\n\n return (\n

\n {card.suit}\n

\n\n

\n {card.value}\n

\n\n

\n {card.suit}\n

\n\n setCard(getRandomCard())}\n className=\"mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition\"\n >\n Draw Random Card\n \n

\n );\n}"},"/index.js":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n\n \n \n \n My App\n\n\n

\n\n"},"/CardDrawer.js":{"code":"function CardDrawer() {\n const suits = [\n { symbol: \"♠\", color: \"text-black\" },\n { symbol: \"♥\", color: \"text-red-600\" },\n { symbol: \"♦\", color: \"text-red-600\" },\n { symbol: \"♣\", color: \"text-black\" },\n ];\n\n const values = [\n \"A\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\",\n \"8\", \"9\", \"10\", \"J\", \"Q\", \"K\",\n ];\n\n const getRandomCard = () => {\n const suit = suits[Math.floor(Math.random() * suits.length)];\n const value = values[Math.floor(Math.random() * values.length)];\n\n return {\n suit: suit.symbol,\n value,\n color: suit.color,\n };\n };\n\n const [card, setCard] = useState(getRandomCard());\n\n useEffect(() => {\n setCard(getRandomCard());\n }, []);\n\n return (\n

\n {card.suit}\n

\n\n

\n {card.value}\n

\n\n

\n {card.suit}\n

\n\n setCard(getRandomCard())}\n className=\"mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition\"\n >\n Draw Random Card\n \n

\n );\n}\n\nexport default CardDrawer;"}}

card drawer by class1fied (rizzler)