68 lines
2.2 KiB
TypeScript
68 lines
2.2 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
|
|
}) {
|
|
if (users.length === 0) return null
|
|
|
|
const visible = users.slice(0, MAX_VISIBLE)
|
|
const overflow = users.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={cn(
|
|
"flex size-8 items-center justify-center rounded-full border-2 border-white text-xs font-semibold text-white shadow-sm dark:border-[#202124]",
|
|
user.isLocal && "ring-2 ring-[#1967d2]/40 ring-offset-1 ring-offset-white dark:ring-offset-[#202124]"
|
|
)}
|
|
style={{ backgroundColor: user.color }}
|
|
aria-label={user.isLocal ? `${user.name} (vous)` : user.name}
|
|
>
|
|
{senderInitial(user.name)}
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
{user.isLocal ? `${user.name} (vous)` : 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">
|
|
{users.slice(MAX_VISIBLE).map((u) => u.name).join(", ")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
</div>
|
|
</TooltipProvider>
|
|
)
|
|
}
|