Avatar group with hover effect

<!--
  cn(...) в оригинале — чистая конкатенация двух строк без условной
  логики, поэтому результат инлайнен литералом в class (правило 1,
  docs/PORTING.md), без обращения к cn().
-->
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="

const avatars = [
  { src: PIXEL, fallback: "DK", name: "David Kim" },
  { src: PIXEL, fallback: "ML", name: "Max Leiter" },
  { src: PIXEL, fallback: "ER", name: "James Brown" },
  { src: PIXEL, fallback: "JW", name: "Jenny Wilson" },
]
</script>

<template>
  <div class="group/avatars flex items-center px-2 py-4">
    <div
      v-for="(avatar, index) in avatars"
      :key="index"
      :style="{ '--index': index, zIndex: avatars.length - index }"
      class="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)]"
    >
      <Avatar
        class="ring-background origin-center ring-2 transition-transform duration-300 ease-in-out group-hover/avatar-item:scale-110"
      >
        <AvatarImage :src="avatar.src" :alt="avatar.name" />
        <AvatarFallback class="text-xs">
          {{ avatar.fallback }}
        </AvatarFallback>
      </Avatar>
    </div>
  </div>
</template>