File size: 1,260 Bytes
c0e8080 |
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 |
typescript
import React from 'react'
import { LucideIcon } from 'lucide-react'
interface KPICardProps {
title: string
value: string
change: string
trend: 'up' | 'down'
icon: LucideIcon
}
const KPICard: React.FC<KPICardProps> = ({ title, value, change, trend, icon: Icon }) => {
return (
<div className="card p-6 hover:shadow-md transition-shadow duration-200">
<div className="flex items-center">
<div className="flex-shrink-0">
<div className="h-12 w-12 bg-primary-100 rounded-full flex items-center justify-center">
<Icon className="h-6 w-6 text-primary-600" />
</div>
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">{title}</p>
<p className="text-2xl font-bold text-gray-900">{value}</p>
<div className={`flex items-center text-sm ${trend === 'up' ? 'text-accent-600' : 'text-red-600'}`}>
{trend === 'up' ? (
<TrendingUp className="h-4 w-4 mr-1" />
) : (
<TrendingDown className="h-4 w-4 mr-1" />
)}
<span>{change} from last week</span>
</div>
</div>
</div>
</div>
)
}
export default KPICard
</html> |