| // src/components/threads/ThreadParticipantAvatars.tsx | |
| interface ThreadParticipantAvatarsProps { | |
| participants: { id: number; username: string; avatarUrl?: string }[]; | |
| max?: number; | |
| } | |
| export function ThreadParticipantAvatars({ | |
| participants, | |
| max = 5, | |
| }: ThreadParticipantAvatarsProps) { | |
| const visible = participants.slice(0, max); | |
| const remaining = participants.length - max; | |
| return ( | |
| <div className="flex -space-x-2"> | |
| {visible.map((p) => ( | |
| <div | |
| key={p.id} | |
| className="relative h-6 w-6 overflow-hidden rounded-full border-2 border-white bg-gradient-to-br from-primary/40 to-secondary/40 dark:border-gray-800" | |
| title={p.username} | |
| > | |
| {p.avatarUrl ? ( | |
| <img src={p.avatarUrl} alt={p.username} className="h-full w-full object-cover" /> | |
| ) : ( | |
| <div className="flex h-full w-full items-center justify-center text-[9px] font-bold text-primary"> | |
| {p.username[0]?.toUpperCase()} | |
| </div> | |
| )} | |
| </div> | |
| ))} | |
| {remaining > 0 && ( | |
| <div | |
| className="flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-gray-200 text-[9px] text-gray-500 dark:border-gray-800 dark:bg-gray-700" | |
| title={`${remaining} more participant${remaining !== 1 ? "s" : ""}`} | |
| > | |
| +{remaining} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.41 kB
- Xet hash:
- 69485906e2aee832039e871df3c6a262fcd927ac1d368d71dc13d883a3e99872
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.