function PortfolioSimulator({ initialBalance = 10000 }) { const [balance, setBalance] = useState(initialBalance); const [portfolio, setPortfolio] = useState({}); const [selectedCrypto, setSelectedCrypto] = useState("BTC"); const [amount, setAmount] = useState(""); const [prices, setPrices] = useState({ BTC: 42000, ETH: 2200, DOGE: 0.08, SOL: 100 }); const cryptos = { BTC: "Bitcoin", ETH: "Ethereum", DOGE: "Dogecoin", SOL: "Solana" }; useEffect(()=>{ const interval = setInterval(()=>{ setPrices((prev)=>({ BTC: prev.BTC * (1 + (Math.random() - 0.5) * 0.02), ETH: prev.ETH * (1 + (Math.random() - 0.5) * 0.02), DOGE: prev.DOGE * (1 + (Math.random() - 0.5) * 0.02), SOL: prev.SOL * (1 + (Math.random() - 0.5) * 0.02) })); }, 3000); return ()=>clearInterval(interval); }, []); const buy = ()=>{ const cost = prices[selectedCrypto] * parseFloat(amount); if (cost <= balance && amount > 0) { setBalance((prev)=>prev - cost); setPortfolio((prev)=>({ ...prev, [selectedCrypto]: (prev[selectedCrypto] || 0) + parseFloat(amount) })); } }; const sell = ()=>{ if (portfolio[selectedCrypto] >= parseFloat(amount) && amount > 0) { const earnings = prices[selectedCrypto] * parseFloat(amount); setBalance((prev)=>prev + earnings); setPortfolio((prev)=>({ ...prev, [selectedCrypto]: prev[selectedCrypto] - parseFloat(amount) })); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0f172a] text-white p-6 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Balance: $", balance.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] p-6 rounded-xl", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Trade"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 mb-4 bg-[#334155] rounded", value: selectedCrypto, onChange: (e)=>setSelectedCrypto(e.target.value), __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, Object.entries(cryptos).map(([symbol, name])=>/*#__PURE__*/ React.createElement("option", { key: symbol, value: symbol, __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, name))), /*#__PURE__*/ React.createElement("input", { type: "number", value: amount, onChange: (e)=>setAmount(e.target.value), placeholder: "Amount", className: "w-full p-2 mb-4 bg-[#334155] rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: buy, className: "bg-green-500 px-6 py-2 rounded hover:bg-green-600 flex-1", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Buy"), /*#__PURE__*/ React.createElement("button", { onClick: sell, className: "bg-red-500 px-6 py-2 rounded hover:bg-red-600 flex-1", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Sell"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] p-6 rounded-xl", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Portfolio"), Object.entries(portfolio).map(([crypto, amount])=>/*#__PURE__*/ React.createElement("div", { key: crypto, className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, cryptos[crypto]), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, amount.toFixed(4), " (", (amount * prices[crypto]).toFixed(2), " ", "USD)"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-[#1e293b] p-6 rounded-xl", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Live Prices"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, Object.entries(prices).map(([crypto, price])=>/*#__PURE__*/ React.createElement("div", { key: crypto, className: "bg-[#334155] p-4 rounded", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, cryptos[crypto]), /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, "$", price.toFixed(2)))))))); } function PortfolioSimulatorStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PortfolioSimulator, { initialBalance: 10000, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this })); } function PriceCard({ name, price, change24h, chartData = [] }) { const isPositiveChange = change24h >= 0; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl p-6 w-[300px] font-inter", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("span", { className: "text-white text-2xl font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "$", price)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isPositiveChange ? "fa-caret-up text-green-500" : "fa-caret-down text-red-500"}`, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${isPositiveChange ? "text-green-500" : "text-red-500"} font-medium`, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, Math.abs(change24h), "%")), /*#__PURE__*/ React.createElement("div", { className: "h-[60px] w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 20", className: "w-full h-full", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: `M ${chartData.map((value, index)=>`${index * (100 / (chartData.length - 1))},${20 - value * 20}`).join(" L ")}`, fill: "none", stroke: isPositiveChange ? "#22c55e" : "#ef4444", strokeWidth: "0.5", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })))); } function PriceCardStory() { const mockData = { name: "Bitcoin", price: "42,890.50", change24h: 2.5, chartData: [ 0.2, 0.4, 0.3, 0.5, 0.4, 0.6, 0.7, 0.6, 0.8, 0.9 ] }; const mockDataNegative = { name: "Ethereum", price: "2,290.75", change24h: -1.8, chartData: [ 0.8, 0.7, 0.6, 0.4, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2 ] }; return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-4 bg-[#121212] min-h-screen items-center justify-center", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PriceCard, { ...mockData, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PriceCard, { ...mockDataNegative, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); } function TrendChart({ data = [], onTimeframeChange }) { const [timeframe, setTimeframe] = useState("1M"); const chartRef = useRef(null); const [hoveredPrice, setHoveredPrice] = useState(null); const processChartData = useCallback((rawData)=>{ return rawData.map((point, index)=>({ date: new Date(point.date).toLocaleDateString(), price: point.price, trend: index > 0 ? point.price - rawData[index - 1].price : 0 })); }, []); const displayData = useMemo(()=>processChartData(data), [ data ]); useEffect(()=>{ if (!chartRef.current || !data.length) return; const width = chartRef.current.offsetWidth; const height = 400; const margin = { top: 20, right: 20, bottom: 30, left: 50 }; const svg = d3.select(chartRef.current).append("svg").attr("width", width).attr("height", height); const xScale = d3.scaleTime().domain(d3.extent(displayData, (d)=>new Date(d.date))).range([ margin.left, width - margin.right ]); const yScale = d3.scaleLinear().domain([ d3.min(displayData, (d)=>d.price) * 0.95, d3.max(displayData, (d)=>d.price) * 1.05 ]).range([ height - margin.bottom, margin.top ]); const line = d3.line().x((d)=>xScale(new Date(d.date))).y((d)=>yScale(d.price)).curve(d3.curveMonotoneX); svg.append("path").datum(displayData).attr("fill", "none").attr("stroke", "#4F46E5").attr("stroke-width", 2).attr("d", line); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xScale)); svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yScale)); const tooltip = svg.append("g").style("display", "none"); tooltip.append("circle").attr("r", 4).style("fill", "#4F46E5"); tooltip.append("text").attr("x", 9).attr("dy", ".35em").attr("class", "font-roboto"); svg.append("rect").attr("width", width).attr("height", height).style("fill", "none").style("pointer-events", "all").on("mouseover", ()=>tooltip.style("display", null)).on("mouseout", ()=>tooltip.style("display", "none")).on("mousemove", (event)=>{ const bisect = d3.bisector((d)=>new Date(d.date)).left; const x0 = xScale.invert(d3.pointer(event)[0]); const i = bisect(displayData, x0, 1); const d0 = displayData[i - 1]; const d1 = displayData[i]; const d = x0 - new Date(d0.date) > new Date(d1.date) - x0 ? d1 : d0; tooltip.attr("transform", `translate(${xScale(new Date(d.date))},${yScale(d.price)})`); tooltip.select("text").text(`$${d.price.toFixed(2)}`); setHoveredPrice(d.price); }); return ()=>{ svg.selectAll("*").remove(); }; }, [ displayData ]); const handleTimeframeChange = (newTimeframe)=>{ setTimeframe(newTimeframe); onTimeframeChange?.(newTimeframe); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Price History $", hoveredPrice ? hoveredPrice.toFixed(2) : data[data.length - 1]?.price.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, [ "1D", "1W", "1M", "1Y" ].map((period)=>/*#__PURE__*/ React.createElement("button", { key: period, onClick: ()=>handleTimeframeChange(period), className: `px-3 py-1 rounded ${timeframe === period ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"} font-roboto transition-colors duration-200`, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, period)))), /*#__PURE__*/ React.createElement("div", { ref: chartRef, className: "w-full h-[400px]", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this })); } function TrendChartStory() { const mockData = Array.from({ length: 30 }, (_, i)=>({ date: new Date(2024, 0, i + 1).toISOString(), price: 100 + Math.random() * 50 })); return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-[1200px] mx-auto", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TrendChart, { data: mockData, onTimeframeChange: (timeframe)=>console.log("Timeframe changed:", timeframe), __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this })); } function NewsCard({ title, content, date, sentiment }) { const getSentimentColor = ()=>{ switch(sentiment){ case "positive": return "bg-green-500"; case "negative": return "bg-red-500"; default: return "bg-yellow-500"; } }; const getSentimentIcon = ()=>{ switch(sentiment){ case "positive": return "fa-solid fa-arrow-trend-up"; case "negative": return "fa-solid fa-arrow-trend-down"; default: return "fa-solid fa-minus"; } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg shadow-lg bg-white p-6 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: `${getSentimentColor()} p-2 rounded-full`, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${getSentimentIcon()} text-white`, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, content), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-clock mr-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), new Date(date).toLocaleDateString())); } function NewsCardStory() { const sampleNews = [ { title: "Bitcoin Reaches New Heights", content: "Bitcoin surges past previous resistance levels as institutional adoption continues to grow globally.", date: "2024-01-15", sentiment: "positive" }, { title: "Crypto Market Faces Uncertainty", content: "Regulatory concerns in major markets create turbulence in cryptocurrency trading volumes.", date: "2024-01-14", sentiment: "negative" }, { title: "Ethereum Network Updates", content: "New protocol improvements proposed for the Ethereum network spark community discussion.", date: "2024-01-13", sentiment: "neutral" } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 p-6 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, sampleNews.map((news, index)=>/*#__PURE__*/ React.createElement(NewsCard, { key: index, ...news, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [selectedTrend, setSelectedTrend] = useState("BTC"); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0f172a] text-gray-100 p-6", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-poppins", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Crypto Analytics Dashboard"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{}, className: "bg-[#312e81] hover:bg-[#3730a3] px-4 py-2 rounded-lg font-medium transition-colors", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wallet mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), "Open Simulator")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2 bg-[#1e293b] rounded-xl p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-poppins", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Price Trends"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, [ "BTC", "ETH", "SOL", "ADA" ].map((symbol)=>/*#__PURE__*/ React.createElement("button", { key: symbol, onClick: ()=>setSelectedTrend(symbol), className: `px-3 py-1 rounded-lg ${selectedTrend === symbol ? "bg-[#312e81]" : "bg-[#283548]"}`, __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, symbol)))), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] rounded-xl p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-poppins", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Market Sentiment"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-3 bg-[#283548] rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Overall Mood"), /*#__PURE__*/ React.createElement("span", { className: "text-green-400", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Bullish")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-3 bg-[#283548] rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Fear & Greed"), /*#__PURE__*/ React.createElement("span", { className: "text-yellow-400", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Neutral")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-3 bg-[#283548] rounded-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Trading Volume"), /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "Declining"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e293b] rounded-xl p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-poppins", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Latest News & Analysis"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-6 right-6", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{}, className: "bg-[#312e81] hover:bg-[#3730a3] p-4 rounded-full shadow-lg transition-transform hover:scale-110", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-xl", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }))))); }