55 lines
1.5 KiB
TypeScript
Executable File
55 lines
1.5 KiB
TypeScript
Executable File
import React, {Children, Fragment, ReactElement, ReactNode} from 'react';
|
|
import {AvatarProps} from '@common/ui/images/avatar';
|
|
import clsx from 'clsx';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {Link} from 'react-router-dom';
|
|
|
|
interface AvatarGroupProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
export function AvatarGroup(props: AvatarGroupProps) {
|
|
const children = Children.toArray(
|
|
props.children
|
|
) as ReactElement<AvatarProps>[];
|
|
|
|
if (!children.length) return null;
|
|
|
|
const firstLink = children[0].props.link;
|
|
const label = children[0].props.label;
|
|
|
|
return (
|
|
<div className={clsx('pl-10 flex isolate items-center', props.className)}>
|
|
<Fragment>
|
|
{children.map((avatar, index) => (
|
|
<div
|
|
key={index}
|
|
style={{zIndex: 5 - index}}
|
|
className={clsx(
|
|
'relative border-2 border-bg-alt bg-alt rounded-full -ml-10 overflow-hidden flex-shrink-0'
|
|
)}
|
|
>
|
|
{avatar}
|
|
</div>
|
|
))}
|
|
</Fragment>
|
|
<div className="text-sm whitespace-nowrap ml-10">
|
|
{firstLink && label ? (
|
|
<Link to={firstLink} className="hover:underline">
|
|
{label}
|
|
</Link>
|
|
) : null}
|
|
{children.length > 1 && (
|
|
<span>
|
|
{' '}
|
|
<Trans
|
|
message="+ :count more"
|
|
values={{count: children.length - 1}}
|
|
/>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|