Avatar List

import { cn } from 'src/lib/utils';
import Image from 'next/image';

const data = [
{
name: 'John Doe',
position: 'Software Engineer',
image:
'https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
name: 'Jane Smith',
position: 'Product Manager',
image:
'https://images.unsplash.com/photo-1582610285985-a42d9193f2fd?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
name: 'David Johnson',
position: 'UX Designer',
image:
'https://images.unsplash.com/photo-1530268729831-4b0b9e170218?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
name: 'Emily Davis',
position: 'Frontend Developer',
image:
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
];

export function AvatarList({
size = 'md',
className,
}: {
size_?_: 'sm' | 'md' | 'lg';
className_?_: string;
}) {
const sizes: Record<'sm' | 'md' | 'lg', string> = {
lg: 'm-3 size-6',
md: 'm-2 size-12',
sm: 'm-1 size-8',
};

return (
<div className={cn('flex', className)}>
{data.map((item) => (
<div
key={item.name}
className="group relative z-0 -ml-8 flex scale-100 items-center transition-all duration-200 ease-in-out hover:z-10 hover:scale-110"
>
<div className="bg-white relative overflow-hidden rounded-full">
<div className="bg-size animate-bg-position pointer-events-none absolute h-full w-full from-violet-500 from-30% via-cyan-400 via-50% to-pink-500 to-80% bg-[length:300%_auto] opacity-15 group-hover:bg-gradient-to-r" />
<div className="z-1 blur-lg" />
<Image
src={item.image}
alt={item.name}
width={100}
height={100}
className={cn(
'rounded-full object-cover',
sizes[size] ?? sizes.md,
)}
/>
</div>
<div className="text-white absolute bottom-full left-1/2 -translate-x-1/2 translate-y-2 transform whitespace-nowrap rounded bg-white-50 p-2 opacity-0 transition-all duration-300 ease-in-out group-hover:-translate-y-2 group-hover:opacity-100 dark:bg-slate-100 dark:text-slate-900">
<div className="text-sm font-semibold">{item.name}</div>
<div className="text-sm">{item.position}</div>
</div>
</div>
))}
</div>
);
}