57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface AvatarStackProps {
|
|
names: string[];
|
|
limit?: number;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export default function AvatarStack({ names, limit = 3, size = 'sm' }: AvatarStackProps) {
|
|
if (!names || names.length === 0) return null;
|
|
|
|
const visibleNames = names.slice(0, limit);
|
|
const extraCount = names.length - limit;
|
|
|
|
const sizeClasses = size === 'sm' ? 'w-6 h-6 text-[10px]' : 'w-8 h-8 text-xs';
|
|
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(' ')
|
|
.map(n => n[0])
|
|
.slice(0, 2)
|
|
.join('')
|
|
.toUpperCase();
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center -space-x-2">
|
|
{visibleNames.map((name, i) => (
|
|
<div
|
|
key={`${name}-${i}`}
|
|
className={`${sizeClasses} rounded-full bg-orange-900/30 border-2 border-zinc-950 flex items-center justify-center text-orange-400 font-bold ring-1 ring-orange-500/10 shadow-sm relative group`}
|
|
title={name}
|
|
>
|
|
{getInitials(name)}
|
|
{/* Tooltip on hover */}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
|
|
{name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{extraCount > 0 && (
|
|
<div
|
|
className={`${sizeClasses} rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-zinc-500 dark:text-zinc-400 font-black ring-1 ring-zinc-500/10 shadow-sm relative group`}
|
|
title={`${extraCount} weitere Personen`}
|
|
>
|
|
+{extraCount}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
|
|
{names.slice(limit).join(', ')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|