import React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { FiLink } from "react-icons/fi"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { LucideMailPlus } from "lucide-react"; export interface UserAvatar { id?: string; name?: string; avatarUrl?: string; tooltipContent?: React.ReactNode; description?: string; } interface DocMenuProps extends React.HTMLAttributes { users?: UserAvatar[]; maxVisibleUsers?: number; onCopyLink?: () => void; onInvite?: () => void; copyLinkIcon?: React.ReactNode; inviteIcon?: React.ReactNode; inviteButtonText?: string; showCopyLinkButton?: boolean; showInviteButton?: boolean; } const docUsers: UserAvatar[] = [ { id: "1", name: "Jake", avatarUrl: "https://img.icons8.com/?size=48&id=jxd84l3wJsts&format=png", description: "Viewed 3h ago", }, { id: "2", name: "Bubbles", avatarUrl: "https://img.icons8.com/?size=48&id=mJbFA2D6hmnY&format=png", description: "Viewed 5h ago", }, { id: "3", name: "Mario", avatarUrl: "https://img.icons8.com/?size=48&id=n2v99rZKO7h5&format=png", description: "Viewed 1d ago", }, { id: "4", name: "Kyle", avatarUrl: "https://img.icons8.com/?size=48&id=H8GZaqcSTyLz&format=png", description: "Viewed 2d ago", }, ]; const DocMenu = React.forwardRef( ( { users = docUsers, maxVisibleUsers = 4, onCopyLink, onInvite, copyLinkIcon, inviteIcon, inviteButtonText = "Invite", showCopyLinkButton = true, showInviteButton = true, className, ...props }, ref ) => { const visibleUsers = users?.slice(0, maxVisibleUsers); const userWidth = 55; return (

{visibleUsers?.map((user, index) => ( {user.tooltipContent ? ( user.tooltipContent ) : ( <> {user.name &&

{user.name}

} {user.description &&

{user.description}

} )} ))}

{showCopyLinkButton && ( )} {showInviteButton && ( )}

); } ); DocMenu.displayName = "DocMenu"; export { DocMenu, type DocMenuProps };

Doc Menu