64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
type Meldung = {
|
|
t: string;
|
|
s: number;
|
|
c: string;
|
|
m: string;
|
|
i: string;
|
|
v: string;
|
|
};
|
|
|
|
export default function MeldungenTabelle({
|
|
messages,
|
|
}: {
|
|
messages: Meldung[];
|
|
}) {
|
|
return (
|
|
<div className="overflow-auto max-h-[80vh]">
|
|
<table className="min-w-full border border-base table-surface text-fg">
|
|
<thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
|
|
<tr>
|
|
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Prio</th>
|
|
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Zeitstempel</th>
|
|
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Quelle</th>
|
|
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Meldung</th>
|
|
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{messages.map((msg, index) => (
|
|
<tr
|
|
key={index}
|
|
className="transition-colors hover:bg-surface-alt/60"
|
|
>
|
|
<td className="border border-base p-2 bg-surface text-fg">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: msg.c }}
|
|
></div>
|
|
</td>
|
|
<td className="border border-base p-2 bg-surface text-fg">
|
|
{new Date(msg.t).toLocaleString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
})}
|
|
</td>
|
|
<td className="border border-base p-2 bg-surface text-fg">{msg.i}</td>
|
|
<td className="border border-base p-2 bg-surface text-fg">{msg.m}</td>
|
|
<td className="border border-base p-2 bg-surface text-fg">{msg.v}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{messages.length === 0 && (
|
|
<div className="mt-4 text-center text-fg-muted italic">
|
|
Keine Meldungen im gewählten Zeitraum vorhanden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|