V avatar 10

//biome-ignore-all lint/suspicious/noArrayIndexKey: <>

import { cn } from "@/lib/utils";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/registry/default/ui/avatar";

const avatars = [
  {
    fallback: "DK",
    name: "David Kim",
    src: "https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80",
  },
  {
    fallback: "ML",
    name: "Max Leiter",
    src: "https://github.com/maxleiter.png",
  },
  {
    fallback: "ER",
    name: "James Brown",
    src: "https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80",
  },
  {
    fallback: "JW",
    name: "Jenny Wilson",
    src: "https://github.com/pranathip.png",
  },
];

export function Pattern() {
  return (
    <div className="group/avatars flex items-center px-2 py-4">
      {avatars.map((avatar, index) => (
        <div
          className="group/avatar-item translate-x-[calc(var(--index)*-8px)] transition-all duration-300 ease-in-out will-change-transform group-hover/avatars:translate-x-[calc(var(--index)*6px)]"
          key={index}
          style={
            {
              "--index": index,
              zIndex: avatars.length - index,
            } as React.CSSProperties
          }
        >
          <Avatar
            className={cn(
              "origin-center ring-2 ring-background transition-transform duration-300 ease-in-out",
              "group-hover/avatar-item:scale-110",
            )}
          >
            <AvatarImage alt={avatar.name} src={avatar.src} />
            <AvatarFallback className="text-xs">
              {avatar.fallback}
            </AvatarFallback>
          </Avatar>
        </div>
      ))}
    </div>
  );
}