You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
23 lines
613 B
23 lines
613 B
import classNames from 'classnames'; |
|
|
|
/** |
|
* Wrapper for displaying a number of Avatar components horizontally, |
|
* either spaced out (default) or overlapping (using the `compact` prop). |
|
*/ |
|
|
|
export const AvatarGroup: React.FC<{ |
|
compact?: boolean; |
|
avatarHeight?: number; |
|
children: React.ReactNode; |
|
}> = ({ children, compact = false, avatarHeight }) => ( |
|
<div |
|
className={classNames('avatar-group', { 'avatar-group--compact': compact })} |
|
style={ |
|
avatarHeight |
|
? ({ '--avatar-height': `${avatarHeight}px` } as React.CSSProperties) |
|
: undefined |
|
} |
|
> |
|
{children} |
|
</div> |
|
);
|
|
|