function MainComponent() { const [percentage, setPercentage] = React.useState(''); const [totalValue, setTotalValue] = React.useState(''); const [result, setResult] = React.useState(null); const handlePercentageChange = (e)=>{ setPercentage(e.target.value); }; const handleTotalValueChange = (e)=>{ setTotalValue(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); const resultValue = parseFloat(percentage) / 100 * parseFloat(totalValue); setResult(resultValue.toFixed(2)); }; const resultText = result !== null ? `${result}% of ${totalValue} is ${result}` : "Please enter values to calculate the percentage."; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Percentage Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "percentage", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Percentage (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "percentage", id: "percentage", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", placeholder: "Enter percentage", value: percentage, onChange: handlePercentageChange, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "total", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Total Value"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "total", id: "total", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", placeholder: "Enter total value", value: totalValue, onChange: handleTotalValueChange, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#1d4ed8] hover:bg-[#2563eb] text-white rounded-md py-2 font-medium", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Calculate"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Result"), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] text-opacity-75", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, resultText)))); }