39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import Link from "next/link";
|
|
import { User } from "@/lib/api";
|
|
import { UserAvatar } from "./user-avatar";
|
|
import { Card, CardContent } from "./ui/card";
|
|
|
|
interface UserListCardProps {
|
|
users: User[];
|
|
}
|
|
|
|
export function UserListCard({ users }: UserListCardProps) {
|
|
if (users.length === 0) {
|
|
return (
|
|
<p className="text-center text-muted-foreground pt-8">
|
|
No users to display.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="divide-y">
|
|
{users.map((user) => (
|
|
<Link
|
|
href={`/users/${user.username}`}
|
|
key={user.id}
|
|
className="flex items-center gap-4 p-4 -mx-6 hover:bg-accent"
|
|
>
|
|
<UserAvatar src={user.avatarUrl} alt={user.displayName} />
|
|
<div>
|
|
<p className="font-bold">{user.displayName || user.username}</p>
|
|
<p className="text-sm text-muted-foreground">@{user.username}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|