"use client";

const AVATARS = [

"https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=150&auto=format&fit=crop",

"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=150&auto=format&fit=crop",

"https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=150&auto=format&fit=crop",

"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=150&auto=format&fit=crop",

"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=150&auto=format&fit=crop",

];

export function AvatarDemo() {

return (

<div className="flex items-center">

{AVATARS.map((src, i) => (

<img

key={i}

src={src}

alt={`Avatar ${i+1}`}

className="w-10 h-10 rounded-full border-2 border-white dark:border-[#141414] object-cover -ml-3 first:ml-0 hover:-translate-y-1 hover:z-10 relative transition-transform duration-300 shadow-sm"

style={{ zIndex: AVATARS.length - i }}

/>

))}

<div className="w-10 h-10 rounded-full border-2 border-white dark:border-[#141414] bg-zinc-100 dark:bg-[#2A2A2A] text-zinc-600 dark:text-zinc-300 flex items-center justify-center text-[12.5px] font-medium -ml-3 relative z-0 shadow-sm hover:-translate-y-1 hover:z-10 transition-transform duration-300 cursor-pointer">

+2

</div>

</div>

);

}