function NewComponent({ value, onValueChange }) { return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "金額", value: value, onChange: (e)=>onValueChange(e.target.value), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function NewComponentStory() { const [amount, setAmount] = React.useState(''); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { value: amount, onValueChange: setAmount, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [cases, setCases] = React.useState([]); const [newCase, setNewCase] = React.useState({ title: '', description: '', status: 'Open', amount: '' }); const addCase = (e)=>{ e.preventDefault(); setCases([ ...cases, { ...newCase, id: Date.now() } ]); setNewCase({ title: '', description: '', status: 'Open', amount: '' }); }; const deleteCase = (id)=>{ setCases(cases.filter((caseItem)=>caseItem.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "案件管理アプリ"), /*#__PURE__*/ React.createElement("form", { onSubmit: addCase, className: "mb-8 bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "新規案件追加"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "案件タイトル", value: newCase.title, onChange: (e)=>setNewCase({ ...newCase, title: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "案件詳細", value: newCase.description, onChange: (e)=>setNewCase({ ...newCase, description: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(NewComponent, { value: newCase.amount, onValueChange: (value)=>setNewCase({ ...newCase, amount: value }), __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, cases.map((caseItem)=>/*#__PURE__*/ React.createElement("div", { key: caseItem.id, className: "bg-white p-4 rounded-lg shadow relative", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, caseItem.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, caseItem.description), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "金額: ", caseItem.amount), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-green-200 text-green-800 px-2 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, caseItem.status), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteCase(caseItem.id), className: "absolute top-2 right-2 text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })))))); }