function MainComponent() { const [records, setRecords] = React.useState([]); const [formState, setFormState] = React.useState({ arrival: '', consumption: '', storage: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormState((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); setRecords((prevRecords)=>[ ...prevRecords, formState ]); setFormState({ arrival: '', consumption: '', storage: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Cartridge Records"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "arrival", className: "block mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Arrival:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "arrival", value: formState.arrival, onChange: handleChange, className: "border border-[#121212] p-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "consumption", className: "block mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Consumption:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "consumption", value: formState.consumption, onChange: handleChange, className: "border border-[#121212] p-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "storage", className: "block mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Storage:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "storage", value: formState.storage, onChange: handleChange, className: "border border-[#121212] p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-[#121212] text-white py-2 px-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Records:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, records.map((record, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Arrival: ", record.arrival, ", Consumption: ", record.consumption, ", Storage: ", record.storage))))); }