function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [result, setResult] = React.useState(""); const [num1, setNum1] = React.useState(""); const [num2, setNum2] = React.useState(""); const [operation, setOperation] = React.useState(""); const handleNumberInput = (e, setter)=>{ setter(e.target.value); }; const handleOperation = (op)=>{ setOperation(op); }; const calculate = ()=>{ const n1 = parseFloat(num1); const n2 = parseFloat(num2); let res; switch(operation){ case "+": res = n1 + n2; break; case "-": res = n1 - n2; break; case "*": res = n1 * n2; break; case "/": res = n2 !== 0 ? n1 / n2 : "除算エラー"; break; default: res = "操作を選択してください"; } setResult(res.toString()); }; const clear = ()=>{ setNum1(""); setNum2(""); setOperation(""); setResult(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-cover bg-center", style: { backgroundImage: `url('https://ucarecdn.com/38efc027-558d-49ca-b9db-e189c40a684e/')` }, __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-90 p-8 rounded-xl shadow-lg max-w-md w-full border-2 border-[#4CAF50]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#2E7D32] mb-6 font-roboto text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "楽しい計算ツール"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: num1, onChange: (e)=>handleNumberInput(e, setNum1), className: "w-full p-3 rounded-lg text-[#2E7D32] focus:outline-none border-2 border-[#4CAF50] bg-[#E8F5E9]", placeholder: "数字1", name: "num1", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", value: num2, onChange: (e)=>handleNumberInput(e, setNum2), className: "w-full p-3 rounded-lg text-[#2E7D32] focus:outline-none border-2 border-[#4CAF50] bg-[#E8F5E9]", placeholder: "数字2", name: "num2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, [ "+", "-", "*", "/" ].map((op)=>/*#__PURE__*/ React.createElement("button", { key: op, onClick: ()=>handleOperation(op), className: `bg-[#81C784] hover:bg-[#66BB6A] text-white font-bold py-3 px-6 rounded-lg text-xl transition duration-200 ${operation === op ? "bg-[#4CAF50]" : ""}`, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, op))), /*#__PURE__*/ React.createElement("button", { onClick: calculate, className: "w-full bg-[#4CAF50] hover:bg-[#388E3C] text-white font-bold py-3 px-6 rounded-lg text-xl transition duration-200", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "計算する！"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#E8F5E9] p-4 rounded-lg border-2 border-[#4CAF50]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", readOnly: true, value: result, className: "w-full text-right text-2xl font-semibold text-[#2E7D32] focus:outline-none bg-transparent", placeholder: "答えは？", name: "result", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: clear, className: "w-full bg-[#81C784] hover:bg-[#66BB6A] text-white font-bold py-3 px-6 rounded-lg text-xl transition duration-200", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "もう一度！"))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/38efc027-558d-49ca-b9db-e189c40a684e/", alt: "数学の教室", className: "w-16 h-16 rounded-full border-2 border-[#4CAF50]", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }))); }