function MainComponent() { const [order, setOrder] = React.useState({ drink: '', size: 'medium', extras: [] }); const handleInputChange = (e)=>{ const { name, value, type, checked } = e.target; if (type === 'checkbox') { setOrder((prevOrder)=>({ ...prevOrder, extras: checked ? [ ...prevOrder.extras, value ] : prevOrder.extras.filter((extra)=>extra !== value) })); } else { setOrder((prevOrder)=>({ ...prevOrder, [name]: value })); } }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(order); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-lg shadow-lg font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Order Your Drink"), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "drink", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Choose your drink"), /*#__PURE__*/ React.createElement("select", { name: "drink", id: "drink", value: order.drink, onChange: handleInputChange, className: "w-full p-2 border border-[#ccc] rounded-md", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Select a drink"), /*#__PURE__*/ React.createElement("option", { value: "coffee", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Coffee"), /*#__PURE__*/ React.createElement("option", { value: "tea", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Tea"), /*#__PURE__*/ React.createElement("option", { value: "juice", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Juice"))), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Choose your size"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "size", value: "small", checked: order.size === 'small', onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }), "Small"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "size", value: "medium", checked: order.size === 'medium', onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), "Medium"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "size", value: "large", checked: order.size === 'large', onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }), "Large"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Extras"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "extras", value: "milk", checked: order.extras.includes('milk'), onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }), "Milk"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "extras", value: "sugar", checked: order.extras.includes('sugar'), onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }), "Sugar"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "extras", value: "ice", checked: order.extras.includes('ice'), onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }), "Ice"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 text-white bg-[#007bff] rounded-md hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "Place Order"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; box-sizing: border-box; } `)); }