function MainComponent() { const [totalCost, setTotalCost] = React.useState(0); const [loading, setLoading] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const yarnRateMaster = { 'Y001': 5.0, 'Y002': 6.5, 'Y003': 4.75 }; const finishingRateMaster = { 'F001': 1.5, 'F002': 2.0, 'F003': 1.0 }; const formData = new FormData(event.target); const yarnCode = formData.get('yarnCode'); const yarnConsumption = parseFloat(formData.get('yarnConsumption')); const finishingProcess = formData.get('finishingProcess'); const yarnCost = (yarnRateMaster[yarnCode] || 0) * yarnConsumption; const finishingCost = finishingRateMaster[finishingProcess] || 0; await new Promise((resolve)=>setTimeout(resolve, 2000)); // Simulate delay setTotalCost(yarnCost + finishingCost); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container max-w-4xl p-5 bg-white shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Fabric Costing Module"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex items-center justify-center px-6 py-2 bg-[#4F46E5] text-white font-roboto rounded-md hover:bg-[#4338CA] disabled:bg-[#a5a5a5]", disabled: loading, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 015.25-7.4A8.02 8.02 0 0012 4v8l-4.47 4.47A7.966 7.966 0 014 12z", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this })), "Loading...") : 'Calculate Cost'))), totalCost > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-green-100 border border-green-200 rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Total Cost: $", totalCost.toFixed(2)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }