Hugging Face's logo

Spaces:
mvbhr
/
anycoder-e3d83b2d
Build error

App Files Community
mvbhr commited on
Commit
c3ad97a
·
verified ·
1 Parent(s): c7d0669

Upload pages/index.js with huggingface_hub

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