Spaces:
Sleeping
Sleeping
File size: 4,406 Bytes
743409d | 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { TrendingDown, AlertTriangle, Shield, Target } from 'lucide-react';
interface StatisticsBarProps {
totalPatterns: number;
criticalCount: number;
complianceScore: number;
avgConfidence: number;
}
export function StatisticsBar({
totalPatterns,
criticalCount,
complianceScore,
avgConfidence,
}: StatisticsBarProps) {
return (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
{/* Critical Card */}
<div className="bg-gradient-to-br from-rose-500/10 via-rose-500/5 to-transparent border border-rose-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-rose-500/40 transition-all duration-300">
<div className="absolute top-0 right-0 w-24 h-24 bg-rose-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
<div className="flex items-center justify-between mb-2">
<AlertTriangle className="w-5 h-5 text-rose-400 group-hover:scale-110 transition-transform" />
<span className="text-[10px] font-bold text-rose-400 uppercase tracking-widest bg-rose-500/10 px-2 py-0.5 rounded-md border border-rose-500/20">
Critical
</span>
</div>
<div className="text-4xl font-extrabold text-foreground mt-2">{criticalCount}</div>
<div className="text-xs text-muted-foreground mt-1.5 font-medium">Violations Detected</div>
</div>
{/* Total Card */}
<div className="bg-gradient-to-br from-indigo-500/10 via-indigo-500/5 to-transparent border border-indigo-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
<div className="flex items-center justify-between mb-2">
<TrendingDown className="w-5 h-5 text-indigo-400 group-hover:scale-110 transition-transform" />
<span className="text-[10px] font-bold text-indigo-400 uppercase tracking-widest bg-indigo-500/10 px-2 py-0.5 rounded-md border border-indigo-500/20">
Total
</span>
</div>
<div className="text-4xl font-extrabold text-foreground mt-2">{totalPatterns}</div>
<div className="text-xs text-muted-foreground mt-1.5 font-medium">Deceptive Copy Blocks</div>
</div>
{/* Compliance Card */}
<div className="bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent border border-emerald-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-emerald-500/40 transition-all duration-300">
<div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
<div className="flex items-center justify-between mb-2">
<Shield className="w-5 h-5 text-emerald-400 group-hover:scale-110 transition-transform" />
<span className="text-[10px] font-bold text-emerald-400 uppercase tracking-widest bg-emerald-500/10 px-2 py-0.5 rounded-md border border-emerald-500/20">
CFPB
</span>
</div>
<div className="text-4xl font-extrabold text-foreground mt-2">
{isNaN(complianceScore) ? 100 : complianceScore}%
</div>
<div className="text-xs text-muted-foreground mt-1.5 font-medium">Compliance Rating</div>
</div>
{/* Confidence Card */}
<div className="bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent border border-cyan-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-cyan-500/40 transition-all duration-300">
<div className="absolute top-0 right-0 w-24 h-24 bg-cyan-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
<div className="flex items-center justify-between mb-2">
<Target className="w-5 h-5 text-cyan-400 group-hover:scale-110 transition-transform" />
<span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest bg-cyan-500/10 px-2 py-0.5 rounded-md border border-cyan-500/20">
AI Model
</span>
</div>
<div className="text-4xl font-extrabold text-foreground mt-2">
{isNaN(avgConfidence) ? 0 : avgConfidence}%
</div>
<div className="text-xs text-muted-foreground mt-1.5 font-medium">Avg NLP Confidence</div>
</div>
</div>
);
}
|