avatar-group

1'use client';
2 
3import * as React from 'react';
4 
5import { cn } from '@/registry/lib/utils';
6 
7function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
8  return (
9    <div
10      data-slot="avatar-group"
11      className={cn(
12        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-1 *:data-[slot=avatar]:ring-background',
13        className
14      )}
15      {...props}
16    />
17  );
18}
19 
20function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
21  return (
22    <div
23      data-slot="avatar-group-count"
24      className={cn(
25        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-ui text-sm text-secondary group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
26        className
27      )}
28      {...props}
29    />
30  );
31}
32 
33export { AvatarGroup, AvatarGroupCount };