44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
|
|
type StatisticsVariant = 'gray' | 'green' | 'orange' | 'blue' | 'purple' | 'red'
|
|
|
|
interface StatisticsCardProps {
|
|
count: number
|
|
label: string
|
|
variant: StatisticsVariant
|
|
className?: string
|
|
icon?: React.ReactNode
|
|
}
|
|
|
|
const variantStyles: Record<StatisticsVariant, string> = {
|
|
gray: 'bg-gray-50 border-gray-200 text-gray-700',
|
|
green: 'bg-green-50 border-green-200 text-green-700',
|
|
orange: 'bg-orange-50 border-orange-200 text-orange-700',
|
|
blue: 'bg-blue-50 border-blue-200 text-blue-700',
|
|
purple: 'bg-purple-50 border-purple-200 text-purple-700',
|
|
red: 'bg-red-50 border-red-200 text-red-700'
|
|
}
|
|
|
|
export const StatisticsCard: React.FC<StatisticsCardProps> = ({
|
|
count,
|
|
label,
|
|
variant,
|
|
className = '',
|
|
icon
|
|
}) => {
|
|
return (
|
|
<div className={`${variantStyles[variant]} border rounded-lg p-3 sm:p-4 text-center ${className}`}>
|
|
{icon && (
|
|
<div className="flex justify-center mb-2">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div className="text-xl sm:text-2xl font-bold mb-1">
|
|
{count}
|
|
</div>
|
|
<div className="text-sm sm:text-base font-medium">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |