function MainComponent() { const [coinsData, setCoinsData] = React.useState([ { symbol: "BTCUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" }, { symbol: "BNBUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" }, { symbol: "SHIBUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" }, { symbol: "DOTUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" }, { symbol: "ETCUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" }, { symbol: "ETHUSDT", open: "Placeholder", high: "Placeholder", low: "Placeholder", close: "Placeholder", volatility: "Placeholder" } ]); React.useEffect(()=>{ const fetchCryptoData = async ()=>{}; fetchCryptoData(); const intervalId = setInterval(fetchCryptoData, 10000); return ()=>clearInterval(intervalId); }, []); const [currentPage, setCurrentPage] = React.useState(1); const coinsPerPage = 15; const indexOfLastCoin = currentPage * coinsPerPage; const indexOfFirstCoin = indexOfLastCoin - coinsPerPage; const currentCoins = coinsData.slice(indexOfFirstCoin, indexOfLastCoin); const paginate = (pageNumber)=>setCurrentPage(pageNumber); const cryptoCoins = currentCoins.map((coin, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "grid grid-cols-6 gap-4 px-4 py-2 border-b border-[#001F3F] text-white font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, coin.symbol), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, coin.open), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, coin.high), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, coin.low), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, coin.close), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, coin.volatility))); const totalPages = Math.ceil(75 / coinsPerPage); const pages = []; for(let i = 1; i <= totalPages; i++){ pages.push(i); } const paginationControls = pages.map((page)=>/*#__PURE__*/ React.createElement("button", { key: page, onClick: ()=>paginate(page), className: `px-2 py-1 ${currentPage === page ? 'bg-blue-700 text-white' : 'text-[#007BFF] bg-white'} rounded-lg mx-1 hover:bg-blue-200 transition duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, page)); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] min-h-screen flex flex-col items-center justify-start", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-2xl mt-8 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Volatility Ranking Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-4 rounded-lg bg-[#001F3F]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-6 gap-4 px-4 py-2 text-white font-roboto font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "SYMBOL"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Open Price"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "High Price"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Low Price"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Close Price"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Volatility Score")), cryptoCoins, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, paginationControls))); }