dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add chameleon gradient transitions with via colors for smooth color blending

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 14:13:10 +01:00
parent 204e6edca5
commit b9efedbb88
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/admin/src/components/ui/StatsCard.tsx
View File

@ -13,28 +13,28 @@ interface StatsCardProps {
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
const colorStyles = {
blue: {
bg: "from-blue-600 to-cyan-600",
bg: "from-blue-600 via-cyan-500 to-teal-500",
text: "text-white",
light: "from-blue-50 to-cyan-50",
badge: "bg-blue-100 text-blue-700",
icon: "bg-blue-100/50 text-blue-600",
},
green: {
bg: "from-emerald-600 to-teal-600",
bg: "from-emerald-600 via-teal-500 to-cyan-500",
text: "text-white",
light: "from-emerald-50 to-teal-50",
badge: "bg-emerald-100 text-emerald-700",
icon: "bg-emerald-100/50 text-emerald-600",
},
purple: {
bg: "from-purple-600 to-blue-600",
bg: "from-purple-600 via-pink-500 to-blue-500",
text: "text-white",
light: "from-purple-50 to-blue-50",
badge: "bg-purple-100 text-purple-700",
icon: "bg-purple-100/50 text-purple-600",
},
orange: {
bg: "from-orange-600 to-red-600",
bg: "from-orange-600 via-red-500 to-pink-500",
text: "text-white",
light: "from-orange-50 to-red-50",
badge: "bg-orange-100 text-orange-700",
@ -46,22 +46,22 @@ export function StatsCard({ title, value, change, trend, icon: Icon, color = "bl
return (
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 pt-5 px-5">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 pt-4 px-4">
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
{title}
</CardTitle>
<div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}>
<Icon size={16} strokeWidth={2} />
<div className={`p-1 rounded-lg ${styles.icon} flex-shrink-0`}>
<Icon size={14} strokeWidth={2} />
</div>
</CardHeader>
<CardContent className="px-5 pb-5 space-y-3">
<div className={`text-3xl font-black ${styles.text}`}>
<CardContent className="px-4 pb-4 space-y-2">
<div className={`text-2xl font-black ${styles.text}`}>
{value}
</div>
{change && (
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<span
className={`inline-flex items-center gap-0.5 font-bold px-2 py-1 rounded-md text-xs tracking-wide ${styles.badge}`}
className={`inline-flex items-center gap-0.5 font-bold px-2 py-0.5 rounded-md text-xs tracking-wide ${styles.badge}`}
>
{trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
</span>