UserAvatarStack

'use client';
import { useState } from 'react';

export default function UserAvatarStack({ max = 5 }) {
  const [hoveredIndex, setHoveredIndex] = useState(null);
  const users = [
    { name: 'Alice K.', role: 'Designer', color: '#C9A84C' },
    { name: 'Bob M.', role: 'Engineer', color: '#6366f1' },
    { name: 'Carol P.', role: 'PM', color: '#4ade80' },
    { name: 'David S.', role: 'Analyst', color: '#f472b6' },
    { name: 'Eva L.', role: 'DevOps', color: '#fb923c' },
    { name: 'Frank H.', role: 'QA', color: '#22d3ee' },
  ];
  const visible = users.slice(0, max);
  const extra = users.length - max;

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', display: 'inline-flex', alignItems: 'center', gap: '12px' }}>
      <div style={{ display: 'flex' }}>
        {visible.map((u, i) => (
          <div
            key={i}
            onMouseEnter={() => setHoveredIndex(i)}
            onMouseLeave={() => setHoveredIndex(null)}
            style={{
              width: '40px', height: '40px', borderRadius: '50%',
              background: u.color,
              border: '2px solid #0A0A0A',
              marginLeft: i === 0 ? 0 : '-12px',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: '13px', fontWeight: 700, color: '#0A0A0A',
              cursor: 'pointer', position: 'relative', zIndex: hoveredIndex === i ? 10 : i,
              transform: hoveredIndex === i ? 'scale(1.15) translateY(-4px)' : 'scale(1)',
              transition: 'all 0.2s ease',
              boxShadow: hoveredIndex === i ? `0 8px 20px ${u.color}60` : 'none',
            }}
          >
            {u.name[0]}
            {hoveredIndex === i && (
              <div style={{
                position: 'absolute', bottom: '48px', left: '50%',
                transform: 'translateX(-50%)',
                background: '#1a1a1a',
                border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: '8px',
                padding: '6px 10px',
                whiteSpace: 'nowrap',
                zIndex: 20,
              }}>
                <p style={{ margin: 0, color: '#F5F5F0', fontSize: '12px', fontWeight: 600 }}>{u.name}</p>
                <p style={{ margin: 0, color: 'rgba(245,245,240,0.4)', fontSize: '11px' }}>{u.role}</p>
              </div>
            )}
          </div>
        ))}
        {extra > 0 && (
          <div style={{
            width: '40px', height: '40px', borderRadius: '50%',
            background: 'rgba(255,255,255,0.08)',
            border: '2px solid #0A0A0A',
            marginLeft: '-12px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: '12px', fontWeight: 700, color: 'rgba(245,245,240,0.6)',
          }}>+{extra}</div>
        )}
      </div>
      <span style={{ color: 'rgba(245,245,240,0.5)', fontSize: '13px' }}>{users.length} collaborators</span>
    </div>
  );
}

Component info

About

Overlapping user avatar stack with tooltip