function MainComponent() { const [raceStatus, setRaceStatus] = React.useState(false); const handleRaceStart = ()=>{ setRaceStatus(true); }; const handleRaceStop = ()=>{ setRaceStatus(false); }; const bikeClass = raceStatus ? "bike-racing-animation" : ""; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Bike Racing Game"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl space-y-6", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 h-[300px] rounded-lg overflow-hidden relative", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute w-full h-full flex items-center justify-center ${bikeClass}`, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-6xl", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "🏍️"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "startButton", onClick: handleRaceStart, className: "px-6 py-3 bg-green-500 text-white rounded-md font-medium hover:bg-green-600", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Start Race"), /*#__PURE__*/ React.createElement("button", { name: "stopButton", onClick: handleRaceStop, className: "px-6 py-3 bg-red-500 text-white rounded-md font-medium hover:bg-red-600", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Stop Race"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` @keyframes drive { from { transform: translateX(100%); } to { transform: translateX(-100%); } } .bike-racing-animation { animation: drive 3s linear infinite; } `)); }