Upload components/MarketOverview.js with huggingface_hub

components/MarketOverview.js

@@ -0,0 +1,31 @@
+export default function MarketOverview({ data }) {
+  if (!data) return null
+
+  const markets = [
+    { name: 'S&P 500', ...data.sp500 },
+    { name: 'NASDAQ', ...data.nasdaq },
+    { name: 'DOW', ...data.dow },
+    { name: 'VIX', ...data.vix },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      {markets.map((market) => {
+        const isPositive = market.change >= 0
+        return (
+          <div key={market.name} className="stock-card">
+            <p className="text-sm font-medium text-gray-500 mb-1">{market.name}</p>
+            <p className="text-xl font-bold text-gray-900">
+              {market.value.toLocaleString()}
+            </p>
+            <p className={`text-sm font-medium ${
+              isPositive ? 'stock-positive' : 'stock-negative'
+            }`}>
+              {isPositive ? '↑' : '↓'} {Math.abs(market.change)} ({market.changePercent > 0 ? '+' : ''}{market.changePercent}%)
+            </p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}