Spaces:
Build error
Build error
File size: 3,736 Bytes
c3ad97a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import { useEffect, useState } from 'react'
import Head from 'next/head'
import StockCard from '../components/StockCard'
import MarketOverview from '../components/MarketOverview'
import StockChart from '../components/StockChart'
import Header from '../components/Header'
export default function Home() {
const [stocks, setStocks] = useState([])
const [marketData, setMarketData] = useState(null)
const [selectedStock, setSelectedStock] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchStocks()
const interval = setInterval(fetchStocks, 5000)
return () => clearInterval(interval)
}, [])
const fetchStocks = async () => {
try {
const response = await fetch('/api/stocks')
const data = await response.json()
setStocks(data.stocks)
setMarketData(data.marketOverview)
if (!selectedStock && data.stocks.length > 0) {
setSelectedStock(data.stocks[0])
}
setLoading(false)
} catch (error) {
console.error('Error fetching stocks:', error)
setLoading(false)
}
}
return (
<>
<Head>
<title>Tech Stocks Dashboard</title>
<meta name="description" content="Real-time tech stocks dashboard" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<div className="min-h-screen bg-gray-50">
<Header />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Market Overview */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Market Overview</h2>
{loading ? (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{[...Array(4)].map((_, i) => (
<div key={i} className="stock-card animate-pulse">
<div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
<div className="h-8 bg-gray-200 rounded w-3/4"></div>
</div>
))}
</div>
) : (
<MarketOverview data={marketData} />
)}
</div>
{/* Stocks Grid */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Big Tech Stocks</h2>
{loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{[...Array(8)].map((_, i) => (
<div key={i} className="stock-card animate-pulse">
<div className="h-4 bg-gray-200 rounded w-1/3 mb-3"></div>
<div className="h-8 bg-gray-200 rounded w-2/3 mb-2"></div>
<div className="h-6 bg-gray-200 rounded w-1/2"></div>
</div>
))}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{stocks.map((stock) => (
<StockCard
key={stock.symbol}
stock={stock}
onClick={() => setSelectedStock(stock)}
isSelected={selectedStock?.symbol === stock.symbol}
/>
))}
</div>
)}
</div>
{/* Stock Chart */}
{selectedStock && (
<div className="stock-card">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
{selectedStock.name} ({selectedStock.symbol})
</h2>
<StockChart symbol={selectedStock.symbol} />
</div>
)}
</main>
</div>
</>
)
} |