63 lines
No EOL
1.3 KiB
TypeScript
63 lines
No EOL
1.3 KiB
TypeScript
"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>
|
|
);
|
|
} |