continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/utils/cn";
+import { TrendingUp, TrendingDown } from "lucide-react";
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  change?: number; // Percentage change
+  suffix?: string;
+  prefix?: string;
+  icon?: React.ReactNode;
+  trend?: "up" | "down" | "neutral";
+  className?: string;
+}
+
+export function StatCard({
+  label,
+  value,
+  change,
+  suffix,
+  prefix,
+  icon,
+  trend,
+  className,
+}: StatCardProps) {
+  const trendColor =
+    trend === "up"
+      ? "text-green-600"
+      : trend === "down"
+        ? "text-red-600"
+        : "text-black-alpha-64";
+  const trendBg =
+    trend === "up"
+      ? "bg-green-50"
+      : trend === "down"
+        ? "bg-red-50"
+        : "bg-black-alpha-4";
+
+  return (
+    <div
+      className={cn(
+        "p-5 lg:p-6 border border-border-faint rounded-12 bg-white",
+        "hover:border-black-alpha-16 transition-colors",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <p className="text-label-small text-black-alpha-64">{label}</p>
+        {icon && <div className="w-5 h-5 text-black-alpha-40">{icon}</div>}
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-baseline gap-1">
+          {prefix && (
+            <span className="text-body-large text-black-alpha-64">
+              {prefix}
+            </span>
+          )}
+          <span className="text-h3 font-semibold text-accent-black">
+            {value}
+          </span>
+          {suffix && (
+            <span className="text-body-large text-black-alpha-64">
+              {suffix}
+            </span>
+          )}
+        </div>
+
+        {(change !== undefined || trend) && (
+          <div className="flex items-center gap-2">
+            {trend && (
+              <div
+                className={cn(
+                  "w-6 h-6 rounded-6 flex items-center justify-center",
+                  trendBg,
+                )}
+              >
+                {trend === "up" ? (
+                  <TrendingUp className={cn("w-3.5 h-3.5", trendColor)} />
+                ) : trend === "down" ? (
+                  <TrendingDown className={cn("w-3.5 h-3.5", trendColor)} />
+                ) : null}
+              </div>
+            )}
+            {change !== undefined && (
+              <span className={cn("text-body-small ", trendColor)}>
+                {change > 0 && "+"}
+                {change}%
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}