41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function FollowersPreview({ users = [], label = '', href = null }) {
|
|
if (!Array.isArray(users) || users.length === 0) return null
|
|
|
|
const preview = users.slice(0, 4)
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex -space-x-2">
|
|
{preview.map((user) => (
|
|
<a
|
|
key={user.id}
|
|
href={user.profile_url || `/@${user.username}`}
|
|
className="inline-flex h-9 w-9 overflow-hidden rounded-full border border-[#09111f] bg-[#09111f] ring-1 ring-white/10"
|
|
title={user.name || user.username}
|
|
>
|
|
<img
|
|
src={user.avatar_url || '/images/avatar_default.webp'}
|
|
alt={user.username || user.name}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-white/90">{label}</p>
|
|
{href ? (
|
|
<a href={href} className="text-xs text-sky-300/80 transition-colors hover:text-sky-200">
|
|
View network
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|