Stock Widgets

1"use client";
2import { cn } from "@/lib/utils";
3import { TrendingUp, TrendingDown, ArrowUpRight, ArrowDownRight } from "lucide-react";
4import { GlassWidgetBase } from "./base-widget";
5 
6interface StockTickerWidgetProps {
7  symbol: string;
8  name?: string;
9  price: number;
10  change: number;
11  changePercent: number;
12  chartData?: number[];
13  className?: string;
14}
15 
16function StockTickerWidget({
17  symbol,
18  name,
19  price,
20  change,
21  changePercent,
22  chartData,
23  className,
24}: StockTickerWidgetProps) {
25  const isPositive = change >= 0;
26  const color = isPositive ? "text-emerald-500" : "text-red-500";
27 
28  return (
29    <GlassWidgetBase className={cn("min-w-45", className)} glowColor={isPositive ? "green" : "red"}>
30      <div className="flex items-start justify-between mb-2">
31        <div className="flex items-center gap-2">
32          {isPositive ? (
33            <TrendingUp className="w-4 h-4 text-emerald-500" />
34          ) : (
35            <TrendingDown className="w-4 h-4 text-red-500" />
36          )}
37          <span className="text-white font-medium">{symbol}</span>
38        </div>
39        <span className={cn("text-sm tabular-nums", color)}>
40          {isPositive ? "+" : ""}
41          {change.toFixed(2)}
42        </span>
43      </div>
44 
45      {chartData && chartData.length > 0 && (
46        <div className="h-12 flex items-end gap-px my-3">
47          {chartData.map((value, i) => {
48            const max = Math.max(...chartData);
49            const min = Math.min(...chartData);
50            const height = ((value - min) / (max - min || 1)) * 100;
51            return (
52              <div
53                key={i}
54                className={cn(
55                  "flex-1 rounded-t transition-all",
56                  isPositive ? "bg-emerald-500/60" : "bg-red-500/60"
57                )}
58                style={{ height: `${Math.max(height, 10)}%` }}
59              />
60            );
61          })}
62        </div>
63      )}
64 
65      <div className="flex items-end justify-between">
66        <div>
67          <div className="text-2xl font-light text-white tabular-nums">{price.toFixed(2)}</div>
68          {name && <div className="text-sm text-white/50 truncate max-w-30">{name}</div>}
69        </div>
70        <span className={cn("text-sm tabular-nums", color)}>
71          {isPositive ? "+" : ""}
72          {changePercent.toFixed(2)}%
73        </span>
74      </div>
75    </GlassWidgetBase>
76  );
77}
78 
79interface CompactStockWidgetProps {
80  symbol: string;
81  price: number;
82  change: number;
83// … truncated