function MainComponent() { const [orders, setOrders] = React.useState([ { company: "Example Company 1", chemical: "Chemical A", quantity: 100, date: "2023-10-01" }, { company: "Example Company 2", chemical: "Chemical B", quantity: 200, date: "2023-10-10" } ]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newOrder = { company: formData.get("company"), chemical: formData.get("chemical"), quantity: formData.get("quantity"), date: formData.get("date") }; setOrders((previousOrders)=>[ ...previousOrders, newOrder ]); event.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 p-4 text-white text-center font-roboto text-2xl", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Chemicals Order Management"), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center w-full mt-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-[300px] md:w-[600px] bg-white shadow-md rounded p-4 mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "New Order"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "company", placeholder: "Company Name", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "chemical", placeholder: "Chemical Name", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", placeholder: "Quantity", className: "p-2 border rounded", required: true, min: "1", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Submit Order"))), /*#__PURE__*/ React.createElement("section", { className: "w-[300px] md:w-[600px] bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Order List"), /*#__PURE__*/ React.createElement("table", { className: "min-w-full table-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Chemical"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Date"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, orders.map((order, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, order.company), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, order.chemical), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, order.quantity), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, order.date)))))))); }

Company	Chemical	Quantity	Date
Example Company 1	Chemical A	100	2023-10-01
Example Company 2	Chemical B	200	2023-10-10