Upload components/StockCard.js with huggingface_hub

components/StockCard.js

@@ -0,0 +1,43 @@
+export default function StockCard({ stock, onClick, isSelected }) {
+  const isPositive = parseFloat(stock.change) >= 0
+  
+  return (
+    <div
+      onClick={onClick}
+      className={`stock-card cursor-pointer transition-all duration-200 ${
+        isSelected ? 'ring-2 ring-primary-500 bg-primary-50' : ''
+      }`}
+    >
+      <div className="flex justify-between items-start mb-3">
+        <div>
+          <h3 className="font-semibold text-gray-900">{stock.symbol}</h3>
+          <p className="text-sm text-gray-500">{stock.name}</p>
+        </div>
+        <div className={`text-xs px-2 py-1 rounded-full ${
+          isPositive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+        }`}>
+          {stock.changePercent > 0 ? '+' : ''}{stock.changePercent}%
+        </div>
+      </div>
+      
+      <div className="flex justify-between items-end">
+        <div>
+          <p className="text-2xl font-bold text-gray-900">
+            ${stock.price}
+          </p>
+          <p className={`text-sm font-medium ${
+            isPositive ? 'stock-positive' : 'stock-negative'
+          }`}>
+            {isPositive ? '↑' : '↓'} {Math.abs(stock.change)}
+          </p>
+        </div>
+        <div className="text-right">
+          <p className="text-xs text-gray-500">Vol</p>
+          <p className="text-sm font-medium text-gray-700">
+            {(stock.volume / 1000000).toFixed(1)}M
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}