36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { CheckCircle, Clock, Gavel } from 'lucide-react';
|
|
|
|
interface StewardingStatsProps {
|
|
totalPending: number;
|
|
totalResolved: number;
|
|
totalPenalties: number;
|
|
}
|
|
|
|
export default function StewardingStats({ totalPending, totalResolved, totalPenalties }: StewardingStatsProps) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="flex items-center gap-2 text-warning-amber mb-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span className="text-xs font-medium uppercase">Pending Review</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{totalPending}</div>
|
|
</div>
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="flex items-center gap-2 text-performance-green mb-1">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-xs font-medium uppercase">Resolved</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{totalResolved}</div>
|
|
</div>
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="flex items-center gap-2 text-red-400 mb-1">
|
|
<Gavel className="w-4 h-4" />
|
|
<span className="text-xs font-medium uppercase">Penalties</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{totalPenalties}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |