NetworkInfo Kompoente von dashboard.tsx incomponents ausgelagert

components/main/uebersicht/Last20MessagesTable.tsx

@@ -0,0 +1,63 @@
+"use client";
+import React from "react";
+
+interface Last20MessagesTableProps {
+  last20Messages: string[][];
+}
+
+const Last20MessagesTable: React.FC<Last20MessagesTableProps> = ({
+  last20Messages,
+}) => {
+  return (
+    <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
+      <table className="min-w-full border border-gray-200 text-left table-fixed ">
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">ID</th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Modul
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Zeitstempel
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
+              Meldung
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody className="text-xs text-gray-600 laptop:text-xs flex-shrink-0">
+          {last20Messages.length > 0 ? (
+            last20Messages.map((columns, index) => (
+              <tr
+                key={index}
+                className="border-b border-gray-200 hover:bg-gray-50"
+              >
+                <td className="px-4 w-1/7">{columns[0]}</td>
+                <td className="px-4 w-1/7">{columns[1]}</td>
+                <td className="px-4 w-3/7 whitespace-nowrap">
+                  <div className="flex flex-row space-x-2">
+                    <span>{columns[2].split(" ")[0]}</span>
+                    <span>{columns[2].split(" ")[1]}</span>
+                  </div>
+                </td>
+                <td className="px-4 w-2/7">{columns[3]}</td>
+                <td className="px-4 w-1/7">{columns[4]}</td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td className="px-4 text-center" colSpan={5}>
+                Keine Meldungen verfügbar.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Last20MessagesTable;