function RedHoverButton({ onClick, children = "戻る" }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RedHoverButtonStory() { const handleBack = ()=>{ console.log("Back clicked"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RedHoverButton, { onClick: handleBack, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function ExpenseSubmitButton({ buttonText, onButtonClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", onClick: onButtonClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function ExpenseSubmitButtonStory() { const handleSubmit = ()=>alert("Submitted"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ExpenseSubmitButton, { buttonText: "OK", onButtonClick: handleSubmit, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent({ onFormSubmit, onBackClick, formData, setFormData }) { const handleChange = (event)=>{ const { name, value } = event.target; setFormData((prevFormData)=>({ ...prevFormData, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "form-input px-4 py-2 border rounded", name: "description", value: formData.description, onChange: handleChange, placeholder: "内訳", type: "text", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "form-input px-4 py-2 border rounded", name: "amount", value: formData.amount, onChange: handleChange, placeholder: "金額", type: "number", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "form-input px-4 py-2 border rounded", name: "date", value: formData.date, onChange: handleChange, placeholder: "日付", type: "date", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(RedHoverButton, { onClick: onBackClick, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ExpenseSubmitButton, { buttonText: "OK", onButtonClick: onFormSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const [formData, setFormData] = React.useState({ description: '', amount: '', date: '' }); const handleFormSubmit = ()=>{ console.log("Form Data:", formData); }; const handleBackClick = ()=>{ console.log("Back to the form"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { formData: formData, setFormData: setFormData, onFormSubmit: handleFormSubmit, onBackClick: handleBackClick, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); }