import { observer } from "mobx-react-lite"; import { ChevronDown } from "lucide-react"; // hooks import { useMember } from "hooks/store"; // ui import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui"; // helpers import { cn } from "helpers/common.helper"; type ButtonProps = { className?: string; dropdownArrow: boolean; dropdownArrowClassName: string; placeholder: string; hideIcon?: boolean; hideText?: boolean; userIds: string | string[] | null; }; const ButtonAvatars = observer(({ userIds }: { userIds: string | string[] | null }) => { const { getUserDetails } = useMember(); if (Array.isArray(userIds)) { if (userIds.length > 0) return ( {userIds.map((userId) => { const userDetails = getUserDetails(userId); if (!userDetails) return; return ; })} ); } else { if (userIds) { const userDetails = getUserDetails(userIds); return ; } } return ; }); export const BorderButton = observer((props: ButtonProps) => { const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, placeholder, userIds, } = props; // store hooks const { getUserDetails } = useMember(); const isMultiple = Array.isArray(userIds); return (
{!hideIcon && } {!hideText && ( {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder} )} {dropdownArrow && (
); }); export const BackgroundButton = observer((props: ButtonProps) => { const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, placeholder, userIds, } = props; // store hooks const { getUserDetails } = useMember(); const isMultiple = Array.isArray(userIds); return (
{!hideIcon && } {!hideText && ( {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder} )} {dropdownArrow && (
); }); export const TransparentButton = observer((props: ButtonProps) => { const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, placeholder, userIds, } = props; // store hooks const { getUserDetails } = useMember(); const isMultiple = Array.isArray(userIds); return (
{!hideIcon && } {!hideText && ( {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder} )} {dropdownArrow && (
); });