Spaces:
Configuration error
Configuration error
File size: 2,520 Bytes
78013c4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | "use client";
import React from "react";
import GlassCard from "./GlassCard";
interface GlassStatCardProps {
icon: React.ReactNode;
label: string;
value: string | number;
trend?: string;
trendUp?: boolean;
accentColor?: string;
}
const iconColors: Record<string, string> = {
blue: "text-blue-400 bg-blue-500/[0.15] shadow-[0_0_15px_rgba(59,130,246,0.3)]",
emerald: "text-emerald-400 bg-emerald-500/[0.15] shadow-[0_0_15px_rgba(16,185,129,0.3)]",
amber: "text-amber-400 bg-amber-500/[0.15] shadow-[0_0_15px_rgba(245,158,11,0.3)]",
rose: "text-rose-400 bg-rose-500/[0.15] shadow-[0_0_15px_rgba(244,63,94,0.3)]",
purple: "text-purple-400 bg-purple-500/[0.15] shadow-[0_0_15px_rgba(168,85,247,0.3)]",
};
const hexColors: Record<string, string> = {
blue: "#3b82f6",
emerald: "#10b981",
amber: "#f59e0b",
rose: "#f43f5e",
purple: "#a855f7",
};
const bgGradients: Record<string, string> = {
blue: "bg-gradient-to-br from-blue-500/[0.04] to-transparent",
emerald: "bg-gradient-to-br from-emerald-500/[0.04] to-transparent",
amber: "bg-gradient-to-br from-amber-500/[0.04] to-transparent",
rose: "bg-gradient-to-br from-rose-500/[0.04] to-transparent",
purple: "bg-gradient-to-br from-purple-500/[0.04] to-transparent",
};
export default function GlassStatCard({
icon,
label,
value,
trend,
trendUp,
accentColor = "blue",
}: GlassStatCardProps): React.ReactElement {
return (
<GlassCard
hoverable
padding="lg"
className={`relative overflow-hidden ${bgGradients[accentColor] || bgGradients.blue}`}
glowColor={hexColors[accentColor] || hexColors.blue}
>
<div className="flex items-start justify-between mb-4">
<div className={`p-3 rounded-xl ${iconColors[accentColor] || iconColors.blue}`}>
{icon}
</div>
{trend && (
<span className={`text-xs font-semibold px-2.5 py-1 rounded-md flex items-center gap-1 ${
trendUp
? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-[0_0_10px_rgba(16,185,129,0.1)]"
: "bg-rose-500/10 text-rose-400 border border-rose-500/20 shadow-[0_0_10px_rgba(244,63,94,0.1)]"
}`}>
{trendUp ? "↑" : "↓"} {trend}
</span>
)}
</div>
<p className="text-3xl font-bold text-white mb-1.5 tracking-tight drop-shadow-md">{value}</p>
<p className="text-sm font-semibold text-slate-400 uppercase tracking-wider">{label}</p>
</GlassCard>
);
}
|