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) { export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
const colorStyles = { const colorStyles = {
blue: { blue: {
bg: "from-blue-600 to-cyan-600", bg: "from-blue-600 via-cyan-500 to-teal-500",
text: "text-white", text: "text-white",
light: "from-blue-50 to-cyan-50", light: "from-blue-50 to-cyan-50",
badge: "bg-blue-100 text-blue-700", badge: "bg-blue-100 text-blue-700",
icon: "bg-blue-100/50 text-blue-600", icon: "bg-blue-100/50 text-blue-600",
}, },
green: { green: {
bg: "from-emerald-600 to-teal-600", bg: "from-emerald-600 via-teal-500 to-cyan-500",
text: "text-white", text: "text-white",
light: "from-emerald-50 to-teal-50", light: "from-emerald-50 to-teal-50",
badge: "bg-emerald-100 text-emerald-700", badge: "bg-emerald-100 text-emerald-700",
icon: "bg-emerald-100/50 text-emerald-600", icon: "bg-emerald-100/50 text-emerald-600",
}, },
purple: { purple: {
bg: "from-purple-600 to-blue-600", bg: "from-purple-600 via-pink-500 to-blue-500",
text: "text-white", text: "text-white",
light: "from-purple-50 to-blue-50", light: "from-purple-50 to-blue-50",
badge: "bg-purple-100 text-purple-700", badge: "bg-purple-100 text-purple-700",
icon: "bg-purple-100/50 text-purple-600", icon: "bg-purple-100/50 text-purple-600",
}, },
orange: { orange: {
bg: "from-orange-600 to-red-600", bg: "from-orange-600 via-red-500 to-pink-500",
text: "text-white", text: "text-white",
light: "from-orange-50 to-red-50", light: "from-orange-50 to-red-50",
badge: "bg-orange-100 text-orange-700", badge: "bg-orange-100 text-orange-700",
@ -46,22 +46,22 @@ export function StatsCard({ title, value, change, trend, icon: Icon, color = "bl
return ( 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`}> <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%]`}> <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
{title} {title}
</CardTitle> </CardTitle>
<div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}> <div className={`p-1 rounded-lg ${styles.icon} flex-shrink-0`}>
<Icon size={16} strokeWidth={2} /> <Icon size={14} strokeWidth={2} />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="px-5 pb-5 space-y-3"> <CardContent className="px-4 pb-4 space-y-2">
<div className={`text-3xl font-black ${styles.text}`}> <div className={`text-2xl font-black ${styles.text}`}>
{value} {value}
</div> </div>
{change && ( {change && (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1">
<span <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} {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
</span> </span>