Avatar Chip

import React, { useState } from 'react';

export const AvatarChip: React.FC = () => {
  const [users, setUsers] = useState([
    { id: 1, name: 'John Doe', avatar: 'JD' },
    { id: 2, name: 'Jane Smith', avatar: 'JS' }
  ]);

  const handleRemove = (id: number) => {
    setUsers(users.filter(user => user.id !== id));
  };

  return (
    <div className="chip-demo-container">
      {users.map((user) => (
        <div key={user.id} className="avatar-chip">
          <div className="avatar-chip-avatar">{user.avatar}</div>
          <span>{user.name}</span>
          <button onClick={() => handleRemove(user.id)}>×</button>
        </div>
      ))}
    </div>
  );
};

.avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--bg-secondary);
  border-radius: 24px;
  transition: all 0.2s ease;
}

.avatar-chip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}