function MainComponent() { const [result, setResult] = React.useState(''); const range16 = Array.from({ length: 16 }, (_, i)=>i + 1); const maxLayersOptions = [ 1, 2, 4, 8 ]; const maxModulationOrders = [ { displayName: "BPSK", value: 0 }, { displayName: "QPSK", value: 1 }, { displayName: "16QAM", value: 2 }, { displayName: "64QAM", value: 3 }, { displayName: "256QAM", value: 4 } ]; const scalingFactors = [ 0.4, 0.75, 0.8, 1 ]; const subCarrierSpacings = [ "15khz", "30khz", "60khz", "120khz", "480khz", "960khz" ]; const bandwidthOptions = Array.from({ length: 6 }, (_, i)=>5 * (i + 1)).concat(Array.from({ length: 8 }, (_, i)=>30 + 10 * i), [ 200, 400, 800, 1600, 2000 ]); const overheadOptions = [ "0.08 FR1", "0.14 FR1", "0.10 FR2", "0.18 FR2" ]; const calculateDataRate = (vLayers, Qm, F, SCS, bandwidth, OH)=>{ const SCSMapping = { "15khz": 15, "30khz": 30, "60khz": 60, "120khz": 120, "480khz": 480, "960khz": 960 }; const Nrb = bandwidth; const SCSValue = SCSMapping[SCS]; const overhead = Number(OH.split(' ')[0]); const dataRate = (Math.pow(10, -6) * vLayers * Qm * F * (948 / 1024) * (Nrb * 12 / (Math.pow(10, -3) / (14 * 2 ** SCSValue))) * (1 - overhead)).toFixed(2); return dataRate + " Mbps"; }; const handleSubmit = (event)=>{ event.preventDefault(); const form = new FormData(event.target); const vLayers = Number(form.get('maxLayers')); const Qm = Number(form.get('maxModulationOrder')); const F = Number(form.get('scalingFactor')); const SCS = form.get('subCarrierSpacing'); const bandwidth = Number(form.get('bandwidth')); const OH = form.get('overhead'); const result = calculateDataRate(vLayers, Qm, F, SCS, bandwidth, OH); setResult(result); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto my-8 p-4 shadow-lg bg-white", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Number of aggregated component carriers in a band:", /*#__PURE__*/ React.createElement("select", { name: "aggregatedComponentCarriers", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, range16.map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, num)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Maximum number of layers (vLayers) :", /*#__PURE__*/ React.createElement("select", { name: "maxLayers", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, maxLayersOptions.map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, num)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Maximum modulation order(Qm):", /*#__PURE__*/ React.createElement("select", { name: "maxModulationOrder", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, maxModulationOrders.map((order)=>/*#__PURE__*/ React.createElement("option", { key: order.value, value: order.value, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, order.displayName)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Scaling factor (F):", /*#__PURE__*/ React.createElement("select", { name: "scalingFactor", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, scalingFactors.map((factor)=>/*#__PURE__*/ React.createElement("option", { key: factor, value: factor, __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, factor)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Sub Carrier Spacing SCS:", /*#__PURE__*/ React.createElement("select", { name: "subCarrierSpacing", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, subCarrierSpacings.map((spacing)=>/*#__PURE__*/ React.createElement("option", { key: spacing, value: spacing, __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, spacing)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Bandwidth:", /*#__PURE__*/ React.createElement("select", { name: "bandwidth", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, bandwidthOptions.map((bandwidth)=>/*#__PURE__*/ React.createElement("option", { key: bandwidth, value: bandwidth, __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, bandwidth)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Overhead (OH):", /*#__PURE__*/ React.createElement("select", { name: "overhead", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, overheadOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, option))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 rounded text-white bg-blue-500 hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-bold", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, result)); }