function MainComponent() { const [weight, setWeight] = React.useState(''); const [length, setLength] = React.useState(''); const [width, setWidth] = React.useState(''); const [height, setHeight] = React.useState(''); const [destination, setDestination] = React.useState('usa'); const [shippingCost, setShippingCost] = React.useState(null); const handleSubmit = (e)=>{ e.preventDefault(); // Logic to calculate shipping cost will go here }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 md:space-y-8", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Shipping Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Package Weight (kg)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "weight", name: "weight", value: weight, onChange: (e)=>setWeight(e.target.value), className: "px-3 py-2 border rounded-md text-lg text-[#121212] font-roboto bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "length", className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Package Length (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "length", name: "length", value: length, onChange: (e)=>setLength(e.target.value), className: "px-3 py-2 border rounded-md text-lg text-[#121212] font-roboto bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Package Width (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "width", name: "width", value: width, onChange: (e)=>setWidth(e.target.value), className: "px-3 py-2 border rounded-md text-lg text-[#121212] font-roboto bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Package Height (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", value: height, onChange: (e)=>setHeight(e.target.value), className: "px-3 py-2 border rounded-md text-lg text-[#121212] font-roboto bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "destination", className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Destination Country"), /*#__PURE__*/ React.createElement("select", { id: "destination", name: "destination", value: destination, onChange: (e)=>setDestination(e.target.value), className: "px-3 py-2 border rounded-md text-lg text-[#121212] font-roboto bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "usa", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "United States"), /*#__PURE__*/ React.createElement("option", { value: "canada", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Canada"), /*#__PURE__*/ React.createElement("option", { value: "mexico", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Mexico"), /*#__PURE__*/ React.createElement("option", { value: "uk", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "United Kingdom"), /*#__PURE__*/ React.createElement("option", { value: "germany", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Germany"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 text-lg font-semibold text-[#FFFFFF] bg-[#0066FF] rounded-md font-roboto hover:bg-[#0056e0] transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Calculate Shipping")), shippingCost && /*#__PURE__*/ React.createElement("div", { className: "text-lg text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Shipping Cost: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 26 }, __self: this }, "$", shippingCost))); }