Animated Avatar Stack

1"use client";
2 
3import type * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { motion } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
9import { Tooltip, TooltipContent, TooltipTrigger } from "@/registry/ui/tooltip";
10 
11export type AvatarData = {
12  src: string;
13  fallback: string;
14  name: string;
15};
16 
17const avatarStackVariants = cva("isolate flex items-center", {
18  variants: {
19    size: {
20      xs: "-space-x-1",
21      sm: "-space-x-1.5",
22      md: "-space-x-2",
23      lg: "-space-x-2.5",
24      xl: "-space-x-3",
25      "2xl": "-space-x-3.5",
26      "3xl": "-space-x-4",
27    },
28  },
29  defaultVariants: {
30    size: "md",
31  },
32});
33 
34const avatarVariants = cva(
35  "relative cursor-pointer select-none overflow-hidden rounded-full hover:shadow-lg",
36  {
37    variants: {
38      size: {
39        xs: "h-6 w-6",
40        sm: "h-8 w-8",
41        md: "h-10 w-10",
42        lg: "h-12 w-12",
43        xl: "h-14 w-14",
44        "2xl": "h-16 w-16",
45        "3xl": "h-20 w-20",
46      },
47    },
48    defaultVariants: {
49      size: "md",
50    },
51  }
52);
53 
54const countBadgeVariants = cva(
55  "relative flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-full bg-secondary font-medium text-muted-foreground hover:shadow-lg",
56  {
57    variants: {
58      size: {
59        xs: "h-6 w-6 text-xs",
60        sm: "h-8 w-8 text-xs",
61        md: "h-10 w-10 text-sm",
62        lg: "h-12 w-12 text-sm",
63        xl: "h-14 w-14 text-base",
64        "2xl": "h-16 w-16 text-lg",
65        "3xl": "h-20 w-20 text-xl",
66      },
67    },
68    defaultVariants: {
69      size: "md",
70    },
71  }
72);
73 
74export interface AnimatedAvatarStackProps
75  extends React.HTMLAttributes<HTMLDivElement>,
76    VariantProps<typeof avatarStackVariants> {
77  avatarData: AvatarData[];
78  maxVisible?: number;
79}
80 
81function AnimatedAvatarStack({
82  avatarData,
83  maxVisible = 5,
84  size = "md",
85  className,
86  ...props
87}: AnimatedAvatarStackProps) {
88  const visibleAvatars = avatarData.slice(0, maxVisible);
89  const hiddenCount = avatarData.length - visibleAvatars.length;
90 
91  return (
92    <div className={cn(avatarStackVariants({ size }), className)} {...props}>
93      {visibleAvatars.map((avatar, index) => (
94        <Tooltip key={`${avatar.fallback}-${index}`}>
95          <TooltipTrigger asChild>
96            <motion.div
97              animate={{ scale: 1, opacity: 1, y: 0 }}
98// … truncated