Avatar group with hover effect and tooltips

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

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>
  <TooltipProvider>
    <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)]"
      >
        <Tooltip>
          <TooltipTrigger as-child>
            <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>
          </TooltipTrigger>
          <TooltipContent :side-offset="10">{{ avatar.name }}</TooltipContent>
        </Tooltip>
      </div>
    </div>
  </TooltipProvider>
</template>