40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
import { User } from "@/lib/api";
|
|
import { UserAvatar } from "./user-avatar";
|
|
|
|
interface TopFriendsStripProps {
|
|
topFriends: User[];
|
|
}
|
|
|
|
export function TopFriendsStrip({ topFriends }: TopFriendsStripProps) {
|
|
return (
|
|
<div className="flex items-center gap-3 p-4 rounded-lg bg-accent/30">
|
|
<div className="flex-1 flex items-center gap-2 flex-wrap">
|
|
{topFriends.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No top friends yet.</p>
|
|
) : (
|
|
topFriends.map((f) => (
|
|
<Link
|
|
key={f.id}
|
|
href={`/users/${f.username}`}
|
|
title={f.displayName ?? f.username}
|
|
>
|
|
<UserAvatar
|
|
src={f.avatarUrl}
|
|
alt={f.displayName ?? f.username}
|
|
className="h-8 w-8"
|
|
/>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
<Link
|
|
href="/settings/friends"
|
|
className="text-sm text-muted-foreground hover:underline shrink-0"
|
|
>
|
|
Edit →
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|