function MainComponent() { const [handleValue, setHandleValue] = React.useState(7); const [profit, setProfit] = React.useState(0.2); const handleSliderChange = (event)=>{ setHandleValue(event.target.valueAsNumber); }; const handleProfitChange = (event)=>{ setProfit(event.target.valueAsNumber); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f4f7f6]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#ffffff] py-4 shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-xl font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "HOBOB"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-8", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "holding-period", className: "font-roboto text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Holding Period (Days):"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "holding-period", name: "holdingPeriod", min: 7, max: 365, value: handleValue, onChange: handleSliderChange, className: "w-full", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-xs font-roboto mt-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "7"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "365"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "profit-maker", className: "font-roboto text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Profit Maker (% per day):"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "profit-maker", name: "profitMaker", min: 0.2, max: 100, step: 0.1, value: profit, onChange: handleProfitChange, className: "w-full", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-xs font-roboto mt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "0.2%"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "100%")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }