Spaces:
Build error
Build error
File size: 3,392 Bytes
49e53ae | 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 'use client';
import { AlertTriangle, CheckCircle, XCircle, Clock } from 'lucide-react';
interface Alert {
id: string;
type: 'critical' | 'warning' | 'success' | 'info';
message: string;
time: string;
}
interface AlertsCardProps {
alerts: Alert[];
totalAlerts: number;
criticalCount: number;
}
export default function AlertsCard({ alerts, totalAlerts, criticalCount }: AlertsCardProps) {
const getAlertIcon = (type: string) => {
switch (type) {
case 'critical':
return <XCircle className="w-4 h-4 text-red-400" />;
case 'warning':
return <AlertTriangle className="w-4 h-4 text-yellow-400" />;
case 'success':
return <CheckCircle className="w-4 h-4 text-green-400" />;
default:
return <Clock className="w-4 h-4 text-blue-400" />;
}
};
const getAlertBg = (type: string) => {
switch (type) {
case 'critical':
return 'bg-red-500/20';
case 'warning':
return 'bg-yellow-500/20';
case 'success':
return 'bg-green-500/20';
default:
return 'bg-blue-500/20';
}
};
return (
<div className="card-dark rounded-3xl p-6 card-hover h-full">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-yellow-400" />
</div>
<div>
<h3 className="text-xl font-bold text-white">ALERTS</h3>
<p className="text-xs text-white/60">System notifications</p>
</div>
</div>
{criticalCount > 0 && (
<span className="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm font-medium animate-pulse">
{criticalCount} Critical
</span>
)}
</div>
{/* Stats */}
<div className="flex items-center gap-4 mb-4 p-3 bg-white/5 rounded-xl">
<div className="flex-1">
<p className="text-2xl font-bold text-white">{totalAlerts}</p>
<p className="text-xs text-white/60">Total Alerts</p>
</div>
<div className="w-px h-10 bg-white/10" />
<div className="flex-1">
<p className="text-2xl font-bold text-yellow-400">Stabilizing</p>
<p className="text-xs text-white/60">System Status</p>
</div>
</div>
{/* Alert List */}
<div className="space-y-2 max-h-48 overflow-y-auto scrollbar-thin">
{alerts.map((alert) => (
<div
key={alert.id}
className={`flex items-center gap-3 p-3 rounded-xl ${getAlertBg(alert.type)} transition-all hover:scale-[1.02]`}
>
{getAlertIcon(alert.type)}
<div className="flex-1 min-w-0">
<p className="text-sm text-white truncate">{alert.message}</p>
<p className="text-xs text-white/40">{alert.time}</p>
</div>
</div>
))}
</div>
{/* View All */}
<button className="w-full mt-4 py-2 text-sm text-white/60 hover:text-white transition-colors border border-white/10 rounded-xl hover:bg-white/5">
View All Alerts
</button>
</div>
);
}
|