Spaces:
Build error
Build error
| 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> | |
| </> | |
| ) | |
| } |