function MainComponent() { const [items, setItems] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const { title, description } = event.target.elements; const newItem = { title: title.value, description: description.value }; if (newItem.title && newItem.description) { setItems([ ...items, newItem ]); title.value = ''; description.value = ''; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f4f4] p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "追加リスト"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#333] text-xs font-roboto mb-2", htmlFor: "grid-title", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-[#333] border border-[#333] rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", name: "title", type: "text", placeholder: "例：買い物リスト", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#333] text-xs font-roboto mb-2", htmlFor: "grid-description", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "詳細"), /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-white text-[#333] border border-[#333] rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", name: "description", rows: "5", placeholder: "例：牛乳を買う", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mt-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4a90e2] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "追加")))), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-lg mt-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white border border-[#333] py-2 px-4 rounded mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333] mb-1", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666] text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, item.description))))); }