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 ( <> Tech Stocks Dashboard
{/* Market Overview */}

Market Overview

{loading ? (
{[...Array(4)].map((_, i) => (
))}
) : ( )}
{/* Stocks Grid */}

Big Tech Stocks

{loading ? (
{[...Array(8)].map((_, i) => (
))}
) : (
{stocks.map((stock) => ( setSelectedStock(stock)} isSelected={selectedStock?.symbol === stock.symbol} /> ))}
)}
{/* Stock Chart */} {selectedStock && (

{selectedStock.name} ({selectedStock.symbol})

)}
) }