first commit
This commit is contained in:
99
components/users/user-table.tsx
Normal file
99
components/users/user-table.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Edit, Trash2, ShieldAlert } from "lucide-react";
|
||||
import { User } from "@/lib/features/auth/authSlice";
|
||||
import { getAvatarUrl } from "@/lib/utils";
|
||||
|
||||
interface UserTableProps {
|
||||
users: User[];
|
||||
onEdit: (user: User) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onHardDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export function UserTable({ users, onEdit, onDelete, onHardDelete }: UserTableProps) {
|
||||
return (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-14">Avatar</TableHead>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Roller</TableHead>
|
||||
<TableHead className="text-right">İşlemler</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center">
|
||||
Kullanıcı bulunamadı.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={getAvatarUrl(user.avatar_url)} alt={user.username} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{user.username?.slice(0, 2).toUpperCase() || "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{user.username}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
{user.roles?.map((r) => r.name).join(", ") || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="inline-flex rounded-md border border-input bg-background [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button]:border-r [&>button:last-child]:border-r-0 [&>button]:border-input">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(user)}
|
||||
className="h-9 w-9"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<span className="sr-only">Düzenle</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-orange-500 hover:text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/20"
|
||||
onClick={() => onDelete(user.id)}
|
||||
title="Sil (Soft)"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Sil</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => onHardDelete(user.id)}
|
||||
title="Kalıcı Sil (Hard)"
|
||||
>
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
<span className="sr-only">Kalıcı Sil</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user