function MainComponent() { const [formData, setFormData] = React.useState({ weight: '', dimensions: '', shipmentType: '', origin: '', destination: '', serviceOptions: [] }); const handleInputChange = (e)=>{ const { name, value, type, checked } = e.target; if (type === "checkbox") { setFormData((prevState)=>({ ...prevState, serviceOptions: checked ? [ ...prevState.serviceOptions, value ] : prevState.serviceOptions.filter((option)=>option !== value) })); } else { setFormData((prevState)=>({ ...prevState, [name]: value })); } }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#F2F2F2]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "weight", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "number", name: "weight", id: "weight", value: formData.weight, onChange: handleInputChange, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "dimensions", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Dimensions (LxWxH in cm)"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "text", name: "dimensions", id: "dimensions", value: formData.dimensions, onChange: handleInputChange, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "shipmentType", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Shipment Type"), /*#__PURE__*/ React.createElement("select", { className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500", name: "shipmentType", id: "shipmentType", value: formData.shipmentType, onChange: handleInputChange, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Select a type"), /*#__PURE__*/ React.createElement("option", { value: "air-cargo", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Air Cargo"), /*#__PURE__*/ React.createElement("option", { value: "sea-cargo", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Sea Cargo"), /*#__PURE__*/ React.createElement("option", { value: "courier-boxes", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Courier Boxes")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "origin", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Origin"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "text", name: "origin", id: "origin", value: formData.origin, onChange: handleInputChange, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "destination", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Destination"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "text", name: "destination", id: "destination", value: formData.destination, onChange: handleInputChange, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "form-checkbox", name: "serviceOptions", value: "insurance", onChange: handleInputChange, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Add Insurance")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "form-checkbox", name: "serviceOptions", value: "express-delivery", onChange: handleInputChange, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Express Delivery")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Get Quote"))))); }