function MainComponent() { const [frogPosition, setFrogPosition] = React.useState({ top: 0, left: 0 }); const handleCheckboxChange = ()=>{ const newPosX = Math.random() * window.innerWidth; const newPosY = Math.random() * window.innerHeight; setFrogPosition({ top: newPosY, left: newPosX }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "To-Do List"), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md list-disc list-inside mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "task1", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), "Task 1"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "task2", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), "Task 2"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "task3", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), "Task 3")), /*#__PURE__*/ React.createElement("div", { id: "sparkly-frog", className: "w-[100px] h-[100px] bg-green-500 rounded-full text-center flex items-center justify-center text-white font-roboto", style: { top: frogPosition.top, left: frogPosition.left }, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "🐸✨"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, ` #sparkly-frog { position: absolute; transition: transform 0.5s ease, top 0.5s ease, left 0.5s ease; } @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-50px); } 100% { transform: translateY(0); } } `)); }