Dashboard und Benutzerverwaltung

frontend/athena/components/users/UserTable.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { User } from "@/types/user";
+
+type Props = {
+  users: User[];
+};
+
+export default function UserTable({ users }: Props) {
+  return (
+    <div className="overflow-hidden rounded-xl border bg-white shadow">
+
+      <table className="w-full">
+
+        <thead className="bg-slate-100">
+
+          <tr>
+
+            <th className="p-4 text-left">ID</th>
+            <th className="p-4 text-left">Benutzername</th>
+            <th className="p-4 text-left">E-Mail</th>
+            <th className="p-4 text-center">Aktionen</th>
+
+          </tr>
+
+        </thead>
+
+        <tbody>
+
+          {users.map((user) => (
+
+            <tr
+              key={user.id}
+              className="border-t hover:bg-slate-50"
+            >
+
+              <td className="p-4">{user.id}</td>
+              <td className="p-4">{user.username}</td>
+              <td className="p-4">{user.email}</td>
+
+              <td className="p-4 text-center">
+
+                <button className="mr-3 rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
+                  Bearbeiten
+                </button>
+
+                <button className="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700">
+                  Löschen
+                </button>
+
+              </td>
+
+            </tr>
+
+          ))}
+
+        </tbody>
+
+      </table>
+
+    </div>
+  );
+}