function MainComponent() { const [coins, setCoins] = React.useState([]); const [timePeriod, setTimePeriod] = React.useState('24h'); React.useEffect(()=>{ async function fetchCoins() { const response = await fetch('https://api.coinmarketcap.com/data-api/v3/cryptocurrency/listing?start=1&limit=10&sortBy=market_cap&sortType=desc&convert=USD&cryptoType=all&tagType=all&audited=false'); const data = await response.json(); setCoins(data.data.cryptoCurrencyList); } fetchCoins(); }, []); const timePeriods = [ '24h', '7d', '30d' ]; const handleChangeTimePeriod = (period)=>{ setTimePeriod(period); }; const highPositiveChangeCoins = coins.filter((coin)=>{ const change = coin.quote.USD.percent_change_24h > 0 ? coin.quote.USD.percent_change_24h : coin.quote.USD.percent_change_7d > 0 ? coin.quote.USD.percent_change_7d : coin.quote.USD.percent_change_30d; return change > 0; }).sort((a, b)=>{ const changeA = Math.max(a.quote.USD.percent_change_24h, a.quote.USD.percent_change_7d, a.quote.USD.percent_change_30d); const changeB = Math.max(b.quote.USD.percent_change_24h, b.quote.USD.percent_change_7d, b.quote.USD.percent_change_30d); return changeB - changeA; }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-[#363636] mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Coinmarketcap Top 10"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, timePeriods.map((period)=>/*#__PURE__*/ React.createElement("button", { key: period, className: `font-roboto text-sm px-4 py-2 m-1 ${timePeriod === period ? 'bg-gray-300' : 'bg-white'} shadow-md rounded`, onClick: ()=>handleChangeTimePeriod(period), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, period))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg overflow-auto w-[90%] max-w-[800px] mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Symbol"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, `Change ${timePeriod}`))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, coins.map((coin)=>/*#__PURE__*/ React.createElement("tr", { key: coin.id, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, coin.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, coin.symbol), /*#__PURE__*/ React.createElement("td", { className: `px-6 py-4 whitespace-nowrap text-sm ${coin.quote.USD[`percent_change_${timePeriod}`] > 0 ? 'text-green-500' : 'text-red-500'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, coin.quote.USD[`percent_change_${timePeriod}`].toFixed(2), "%")))))), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-[#363636] mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "高いプラス変動銘柄"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg overflow-auto w-[90%] max-w-[800px]", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Symbol"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Positive Change"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, highPositiveChangeCoins.slice(0, 10).map((coin)=>/*#__PURE__*/ React.createElement("tr", { key: coin.id, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, coin.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, coin.symbol), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-green-500", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, Math.max(coin.quote.USD.percent_change_24h, coin.quote.USD.percent_change_7d, coin.quote.USD.percent_change_30d).toFixed(2), "%"))))))); }