42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { TrendingUp, TrendingDown } from 'lucide-react';
|
|
import InfoTooltip from './common/InfoTooltip';
|
|
|
|
const KpiCard = ({ title, value, change, trend, icon: Icon, onClick, tooltip }) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.02 }}
|
|
onClick={onClick}
|
|
className="bg-white dark:bg-gray-950 border border-[#F2F2F2] dark:border-gray-800 rounded-2xl p-6 cursor-pointer transition-shadow hover:shadow-lg relative group"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="w-12 h-12 rounded-xl bg-[#F2F2F2] dark:bg-gray-900 flex items-center justify-center">
|
|
{Icon && <Icon className="w-6 h-6 text-[#338660]" />}
|
|
</div>
|
|
{change && (
|
|
<div className={`flex items-center gap-1 text-sm font-medium ${
|
|
trend === 'up' ? 'text-[#338660] dark:text-green-400' :
|
|
trend === 'down' ? 'text-[#007E45] dark:text-red-400' :
|
|
'text-[#6A6A6A] dark:text-gray-400'
|
|
}`}>
|
|
{trend === 'up' ? <TrendingUp className="w-4 h-4" /> : trend === 'down' ? <TrendingDown className="w-4 h-4" /> : null}
|
|
{change}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<h3 className="text-sm text-[#6A6A6A] dark:text-gray-400 mb-1">{title}</h3>
|
|
{tooltip && (
|
|
<div className="mb-1">
|
|
<InfoTooltip {...tooltip} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="text-2xl font-bold text-black dark:text-white">{value}</p>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default KpiCard;
|