80 lines
2.6 KiB
TypeScript
80 lines
2.6 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">
|
|
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
|
|
<tr>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Prio
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Zeitstempel
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Quelle
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Meldung
|
|
</th>
|
|
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{messages.map((msg, index) => (
|
|
<tr
|
|
key={index}
|
|
className="hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: msg.c }}
|
|
></div>
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{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 p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.i}
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.m}
|
|
</td>
|
|
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
{msg.v}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{messages.length === 0 && (
|
|
<div className="mt-4 text-center text-gray-500 italic">
|
|
Keine Meldungen im gewählten Zeitraum vorhanden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|