sign/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx

import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';

export type StackAvatarProps = {
  first?: boolean;
  zIndex?: string;
  fallbackText?: string;
  type: 'unsigned' | 'waiting' | 'completed';
};

export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
  let classes = '';
  let zIndexClass = '';
  const firstClass = first ? '' : '-ml-3';

  switch (type) {
    case 'unsigned':
      classes = 'bg-dawn-200 text-dawn-900';
      break;
    case 'waiting':
      classes = 'bg-water text-water-700';
      break;
    case 'completed':
      classes = 'bg-documenso-200 text-documenso-800';
      break;
    default:
      break;
  }

  switch (zIndex) {
    case '10':
      zIndexClass = 'z-10';
      break;
    case '20':
      zIndexClass = 'z-20';
      break;
    case '30':
      zIndexClass = 'z-30';
      break;
    case '40':
      zIndexClass = 'z-40';
      break;
    case '50':
      zIndexClass = 'z-50';
      break;
    default:
      break;
  }

  return (
    <Avatar
      className={`
        ${zIndexClass}
        ${firstClass}
        h-10 w-10 border-2 border-solid border-white`}
    >
      <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
    </Avatar>
  );
};