71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import clsx from 'clsx';
|
|
|
|
import { toAbsoluteUrl } from '@/utils/Assets';
|
|
|
|
interface IAvatarsItem {
|
|
path?: string;
|
|
filename?: string;
|
|
fallback?: string;
|
|
variant?: string;
|
|
}
|
|
interface IAvatarsItems extends Array<IAvatarsItem> {}
|
|
|
|
interface IAvatarsProps {
|
|
size?: string;
|
|
group: IAvatarsItem[];
|
|
more?: { variant?: string; number?: number | string; label?: string };
|
|
className?: string;
|
|
}
|
|
|
|
const CommonAvatars = ({ size, group, more, className }: IAvatarsProps) => {
|
|
const avatarSize = size ? size : 'size-6';
|
|
|
|
const renderItem = (each: IAvatarsItem, index: number) => {
|
|
return (
|
|
<div key={index} className="flex">
|
|
{each.filename || each.path ? (
|
|
<img
|
|
src={toAbsoluteUrl(each.path || `/media/avatars/${each.filename}`)}
|
|
className={clsx(
|
|
`hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light ${avatarSize}`
|
|
)}
|
|
alt=""
|
|
/>
|
|
) : each.fallback ? (
|
|
<span
|
|
className={clsx(
|
|
`hover:z-5 relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${avatarSize}`,
|
|
each.variant
|
|
)}
|
|
>
|
|
{each.fallback}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={clsx('flex -space-x-2', className && className)}>
|
|
{group.map((each, index) => {
|
|
return renderItem(each, index);
|
|
})}
|
|
|
|
{more && (
|
|
<div className="flex">
|
|
<span
|
|
className={clsx(
|
|
`relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${size} size-6`,
|
|
more.variant
|
|
)}
|
|
>
|
|
+{more.number || more.label}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { CommonAvatars, type IAvatarsItem, type IAvatarsItems, type IAvatarsProps };
|