Stats Widgets

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import {
6  TrendingUp,
7  TrendingDown,
8  ArrowUp,
9  ArrowDown,
10  Minus,
11} from "lucide-react";
12import { GlassWidgetBase } from "./base-widget";
13 
14interface StatCardProps {
15  title: string;
16  value: string | number;
17  change?: {
18    value: number;
19    type: "increase" | "decrease" | "neutral";
20  };
21  icon?: React.ReactNode;
22  glowColor?: "cyan" | "purple" | "blue" | "pink" | "green" | "amber" | "red";
23  className?: string;
24}
25 
26function StatCard({
27  title,
28  value,
29  change,
30  icon,
31  glowColor = "cyan",
32  className,
33}: StatCardProps) {
34  const changeColors = {
35    increase: "text-emerald-400",
36    decrease: "text-red-400",
37    neutral: "text-white/50",
38  };
39 
40  const ChangeIcon = change?.type === "increase" ? ArrowUp : change?.type === "decrease" ? ArrowDown : Minus;
41 
42  return (
43    <GlassWidgetBase
44      className={cn("min-w-48", className)}
45      size="md"
46      glowColor={glowColor}
47    >
48      <div className="flex items-start justify-between mb-3">
49        <div className="text-white/60 text-sm">{title}</div>
50        {icon && <div className="text-white/40">{icon}</div>}
51      </div>
52      <div className="text-3xl font-light text-white mb-2">{value}</div>
53      {change && (
54        <div className={cn("flex items-center gap-1 text-xs", changeColors[change.type])}>
55          <ChangeIcon className="w-3 h-3" />
56          <span>{Math.abs(change.value)}%</span>
57          <span className="text-white/50">vs last period</span>
58        </div>
59      )}
60    </GlassWidgetBase>
61  );
62}
63 
64interface MetricStatProps {
65  label: string;
66  value: number;
67  max?: number;
68  unit?: string;
69  icon?: React.ReactNode;
70  glowColor?: "cyan" | "purple" | "blue" | "pink" | "green" | "amber" | "red";
71  className?: string;
72}
73 
74function MetricStat({
75  label,
76  value,
77  max = 100,
78  unit = "",
79  icon,
80  glowColor = "blue",
81  className,
82}: MetricStatProps) {
83  const percentage = Math.min((value / max) * 100, 100);
84 
85  return (
86    <GlassWidgetBase
87      className={cn("min-w-56", className)}
88      size="md"
89      glowColor={glowColor}
90    >
91      <div className="flex items-center justify-between mb-3">
92        <div className="flex items-center gap-2">
93          {icon && <div className="text-white/60">{icon}</div>}
94          <div className="text-white/60 text-sm">{label}</div>
95        </div>
96        <div className="text-white font-medium">
97          {value}
98// … truncated