64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
import { senderInitial } from "@/lib/sender-display"
|
|
import type { CollabPresenceUser } from "@/lib/drive/use-collab-presence"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const MAX_VISIBLE = 5
|
|
|
|
export function CollabPresenceAvatars({
|
|
users,
|
|
className,
|
|
}: {
|
|
users: CollabPresenceUser[]
|
|
className?: string
|
|
}) {
|
|
const remoteUsers = users.filter((user) => !user.isLocal)
|
|
if (remoteUsers.length === 0) return null
|
|
|
|
const visible = remoteUsers.slice(0, MAX_VISIBLE)
|
|
const overflow = remoteUsers.length - visible.length
|
|
|
|
return (
|
|
<TooltipProvider delayDuration={200}>
|
|
<div className={cn("flex items-center -space-x-1.5", className)}>
|
|
{visible.map((user) => (
|
|
<Tooltip key={user.clientId}>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className="flex size-8 items-center justify-center rounded-full border-2 border-white text-xs font-semibold text-white shadow-sm dark:border-[#202124]"
|
|
style={{ backgroundColor: user.color }}
|
|
aria-label={user.name}
|
|
>
|
|
{senderInitial(user.name)}
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">{user.name}</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
{overflow > 0 ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className="flex size-8 items-center justify-center rounded-full border-2 border-white bg-[#5f6368] text-xs font-semibold text-white shadow-sm dark:border-[#202124]"
|
|
aria-label={`${overflow} autre(s) utilisateur(s)`}
|
|
>
|
|
+{overflow}
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
{remoteUsers.slice(MAX_VISIBLE).map((u) => u.name).join(", ")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
</div>
|
|
</TooltipProvider>
|
|
)
|
|
}
|