import classNames from 'classnames' ; const avatarGroupDuo = ( [ a , b ] , alt ? , props ? ) : JSX . Element => ( < div role = "img" className = { classNames ( 'flex' , 'h-full' , 'w-full' ) } aria - label = { alt } > < img className = { classNames ( '-translate-x-1/2' , 'w-1/2' , 'h-full' , 'object-cover' ) } src = { a } alt = "" { ... props } /> < img className = { classNames ( 'translate-x-1/2' , 'w-1/2' , 'h-full' , 'object-cover' ) } src = { b } alt = "" { ... props } /> < /div>); const avatarGroupTrio = ( [ a , b , c ] , alt ? , props ? ) : JSX . Element => ( < div role = "img" className = { classNames ( 'flex' , 'flex-wrap' , 'h-full' , 'w-full' ) } aria - label = { alt } > < img className = { classNames ( 'w-full' , 'h-1/2' , 'object-cover' ) } src = { a } alt = "" { ... props } /> < img className = { classNames ( '-translate-x-1/2' , 'translate-y-1/2' , 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { b } alt = "" { ... props } /> < img className = { classNames ( 'translate-x-1/2' , 'translate-y-1/2' , 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { c } alt = "" { ... props } /> < /div>); const avatarGroupQuartet = ( [ a , b , c , d ] , alt ? , props ? ) : JSX . Element => ( < div role = "img" className = { classNames ( 'flex' , 'w-full' , 'h-full' , 'flex-wrap' ) } aria - label = { alt } > < img className = { classNames ( 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { a } alt = "" / > < img className = { classNames ( 'translate-y-1/2' , 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { b } alt = "" { ... props } /> < img className = { classNames ( '-translate-x-1/2' , 'translate-y-1/2' , 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { c } alt = "" { ... props } /> < img className = { classNames ( 'translate-x-1/2' , 'translate-y-1/2' , 'w-1/2' , 'h-1/2' , 'object-cover' ) } src = { d } alt = "" { ... props } /> < /div>); export type AvatarGroupProps = Readonly < Omit < JSX . IntrinsicElements [ 'img' ] , 'alt' | 'src' > > & { readonly src ? : string | readonly string [ ] ; readonly alt ? : string ; } ; export const AvatarGroup = ( props ) : JSX . Element | null => { const { src , alt , ... rest } = props ; if ( src == null ) { return null ; } if ( typeof src === 'string' ) { return < img src = { src } alt = { alt } { ... rest } />; } if ( Array . isArray ( src ) && src . length === 1 ) { return < img src = { src [ 0 ] } alt = { alt } { ... rest } />; } if ( Array . isArray ( src ) && src . length === 2 ) { return avatarGroupDuo ( src , alt , rest ) ; } if ( Array . isArray ( src ) && src . length === 3 ) { return avatarGroupTrio ( src , alt , rest ) ; } return avatarGroupQuartet ( src , alt , rest ) ; } ;