33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { ArrowDown } from 'lucide-react';
|
|
|
|
export default function StatCard({ title, subtitle, value, color, icon: Icon }) {
|
|
const colorClasses = {
|
|
green: 'from-emerald-400 to-emerald-500',
|
|
red: 'from-rose-400 to-rose-500',
|
|
blue: 'from-blue-400 to-blue-500',
|
|
};
|
|
|
|
return (
|
|
<div className={`relative overflow-hidden rounded-[2rem] p-8 text-white bg-gradient-to-br shadow-xl shadow-${color}-100 ${colorClasses[color]}`}>
|
|
<div className="relative z-10">
|
|
<div className="bg-white/20 w-10 h-10 rounded-xl flex items-center justify-center mb-6">
|
|
<Icon size={20} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h3 className="text-4xl font-bold tracking-tight">{value}</h3>
|
|
<p className="text-white/80 font-medium text-sm">{title}</p>
|
|
<p className="text-white/50 text-xs font-medium uppercase tracking-wider">{subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Icon Overlay Design */}
|
|
<div className="absolute -right-4 -top-4 bg-white/10 w-32 h-32 rounded-full flex items-center justify-center -rotate-12">
|
|
<div className="bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
|
|
<ArrowDown size={20} className="text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|