function MainComponent() { const [coffeeRecords, setCoffeeRecords] = React.useState([]); const [form, setForm] = React.useState({ coffeeName: "", brewMethod: "", date: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setForm((prevForm)=>({ ...prevForm, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); setCoffeeRecords((prevRecords)=>[ ...prevRecords, form ]); setForm({ coffeeName: "", brewMethod: "", date: "" }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-gray-100 h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "コーヒー記録アプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "coffeeName", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "コーヒー名"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "coffeeName", name: "coffeeName", type: "text", placeholder: "コーヒー名", value: form.coffeeName, onChange: handleChange, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "brewMethod", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "淹れ方"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "brewMethod", name: "brewMethod", type: "text", placeholder: "淹れ方", value: form.brewMethod, onChange: handleChange, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "date", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "date", name: "date", type: "date", value: form.date, onChange: handleChange, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "記録する")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, coffeeRecords.map((record, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "コーヒー名: ", record.coffeeName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "淹れ方: ", record.brewMethod), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "日付: ", record.date))))); }