function MainComponent() { const [customers] = React.useState([ { name: "John Doe", address: "123 Elm Street" }, { name: "Jane Smith", address: "456 Oak Avenue" } ]); const [items] = React.useState([ { itemName: "Laptop", itemID: "ITM001", price: "$999" }, { itemName: "Smartphone", itemID: "ITM002", price: "$599" } ]); const [selectedCustomer, setSelectedCustomer] = React.useState(''); const [selectedItem, setSelectedItem] = React.useState(''); const [quantity, setQuantity] = React.useState(1); const handleCustomerChange = (event)=>{ setSelectedCustomer(event.target.value); }; const handleItemChange = (event)=>{ setSelectedItem(event.target.value); }; const handleQuantityChange = (event)=>{ setQuantity(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto my-8 p-4 bg-[#f3f4f6] rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customer-select", className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Select Customer"), /*#__PURE__*/ React.createElement("select", { id: "customer-select", name: "customer", value: selectedCustomer, onChange: handleCustomerChange, className: "p-2 bg-white border border-[#d1d5db] rounded-md font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Please select a customer"), customers.map((customer, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: `${customer.name}, ${customer.address}`, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, customer.name, " - ", customer.address)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "item-select", className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Select Item"), /*#__PURE__*/ React.createElement("select", { id: "item-select", name: "item", value: selectedItem, onChange: handleItemChange, className: "p-2 bg-white border border-[#d1d5db] rounded-md font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Please select an item"), items.map((item, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: item.itemID, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, item.itemName, " - ", item.price)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quantity-input", className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { id: "quantity-input", type: "number", name: "quantity", min: "1", value: quantity, onChange: handleQuantityChange, className: "p-2 bg-white border border-[#d1d5db] rounded-md font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-3 bg-[#2563eb] text-white font-roboto rounded-md hover:bg-[#1d4ed8] transition-colors", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Submit"))); }