Update src/components/ui/AvatarGroup.tsx

src/components/ui/AvatarGroup.tsx

@@ -1,48 +0,0 @@
-import { cls } from "@/lib/utils";
-
-interface AvatarGroupProps {
-  avatarsSrc: string[];
-  max?: number;
-  size?: "sm" | "md" | "lg";
-  label?: string;
-  labelClassName?: string;
-  className?: string;
-}
-
-const SIZES = {
-  sm: "size-8 text-xs",
-  md: "size-10 text-sm",
-  lg: "size-12 text-base",
-};
-
-const AvatarGroup = ({ avatarsSrc, max = 5, size = "md", label, labelClassName, className = "" }: AvatarGroupProps) => {
-  const visible = avatarsSrc.slice(0, max);
-  const remaining = avatarsSrc.length - visible.length;
-
-  return (
-    <div className={cls("flex items-center gap-3", className)}>
-      <div className="flex items-center">
-        {visible.map((src, index) => (
-          <div
-            key={index}
-            className={cls(
-              "relative shrink-0 overflow-hidden rounded-full border-2 border-background",
-              SIZES[size],
-              index > 0 && "-ml-3"
-            )}
-          >
-            <img src={src} alt="" className="h-full w-full object-cover" />
-          </div>
-        ))}
-        {remaining > 0 && (
-          <div className={cls("flex items-center justify-center shrink-0 rounded-full border-2 border-background secondary-button font-medium text-secondary-cta-text -ml-3", SIZES[size])}>
-            +{remaining}
-          </div>
-        )}
-      </div>
-      {label && <span className={cls("text-base font-medium text-foreground", labelClassName)}>{label}</span>}
-    </div>
-  );
-};
-
-export default AvatarGroup;