function BlueSubmitButton({ text }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3182CE] hover:bg-[#2B6CB0] text-white font-semibold rounded-lg w-full p-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function BlueSubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueSubmitButton, { text: "Submit", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [question, setQuestion] = React.useState({ text: "5 + 3", answer: "8" }); const [userAnswer, setUserAnswer] = React.useState(''); const [feedback, setFeedback] = React.useState(''); const generateQuestion = ()=>{ const num1 = Math.floor(Math.random() * 20) + 1; const num2 = Math.floor(Math.random() * 20) + 1; const ops = [ '+', '-', '*', '/' ]; const op = ops[Math.floor(Math.random() * ops.length)]; let answer; switch(op){ case '+': answer = num1 + num2; break; case '-': answer = num1 - num2; break; case '*': answer = num1 * num2; break; case '/': answer = num1 / num2; answer = answer.toFixed(2); break; default: throw new Error('Unknown operation'); } setQuestion({ text: `${num1} ${op} ${num2}`, answer: String(answer) }); setUserAnswer(''); setFeedback(''); }; const handleSubmit = (e)=>{ e.preventDefault(); if (userAnswer === question.answer) { setFeedback('Correct! 🎉'); generateQuestion(); } else { setFeedback('Try again! ❌'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7FAFC]", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#2D3748] mb-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Elementary Math Practice"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 max-w-sm w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium text-[#2D3748] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Solve the problem:"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#EDF2F7] p-4 rounded-lg mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-center text-[#4A5568]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, question.text, " = ?")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", placeholder: "Enter your answer", className: "border-2 border-[#CBD5E0] rounded-lg w-full p-2 mb-4 text-lg", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(BlueSubmitButton, { text: "Submit", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), feedback && /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 22 }, __self: this }, feedback))); }