54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Alert, AlertSeverity } from '../types.ts';
|
|
import { InfoIcon, WarningIcon, CriticalIcon } from './icons/Icons.tsx';
|
|
|
|
interface AlertFeedProps {
|
|
alerts: Alert[];
|
|
}
|
|
|
|
const severityConfig = {
|
|
[AlertSeverity.INFO]: { icon: <InfoIcon />, color: 'bg-blue-100 text-blue-800 border-blue-400' },
|
|
[AlertSeverity.WARNING]: {
|
|
icon: <WarningIcon />,
|
|
color: 'bg-yellow-100 text-yellow-800 border-yellow-400',
|
|
},
|
|
[AlertSeverity.CRITICAL]: {
|
|
icon: <CriticalIcon />,
|
|
color: 'bg-red-100 text-red-800 border-red-400',
|
|
},
|
|
};
|
|
|
|
const AlertFeed: React.FC<AlertFeedProps> = ({ alerts }) => {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm h-full">
|
|
<h2 className="text-xl font-bold mb-4">Notifikasi & Peringatan</h2>
|
|
<div className="space-y-4">
|
|
{alerts.length === 0 ? (
|
|
<div className="p-6 text-center text-gray-500 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
|
|
<div className="text-4xl mb-2">🔔</div>
|
|
<p className="font-medium text-gray-600 mb-1">Tidak ada notifikasi</p>
|
|
<p className="text-sm text-gray-500">
|
|
Sistem monitoring real-time sedang dalam pengembangan
|
|
</p>
|
|
</div>
|
|
) : (
|
|
alerts.map((alert) => (
|
|
<div
|
|
key={alert.id}
|
|
className={`p-4 rounded-lg flex items-start space-x-4 border-l-4 ${severityConfig[alert.severity].color}`}
|
|
>
|
|
<div className="text-2xl mt-1">{severityConfig[alert.severity].icon}</div>
|
|
<div>
|
|
<p className="font-semibold">{alert.message}</p>
|
|
<p className="text-sm opacity-75">{alert.timestamp}</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlertFeed;
|