Filter Badge

Filter Badge inspired by Tremor

import { FilterBadge } from "@/components/ui/filter-badge"

export function FilterBadgeAvatar() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <FilterBadge 
        variant="avatar"
        avatar="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
        onRemove={() => {}}
      >
        John Doe
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://images.unsplash.com/photo-1619895862022-09114b41f16f?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
        onRemove={() => {}}
      >
        Emily Smith
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://images.unsplash.com/photo-1569128782402-d1ec3d0c1b1b?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
        onRemove={() => {}}
      >
        Max Bosh
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://images.unsplash.com/photo-1566761284295-af58908238bb?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
        onRemove={() => {}}
      >
        Mike Kingston
      </FilterBadge>
    </div>
  )
}