src/components/ui/AvatarGroup.tsx

@@ -0,0 +1,39 @@
+import { cls } from "@/lib/utils";
+import ImageOrVideo from "./ImageOrVideo";
+
+interface Avatar {
+  src: string;
+  alt: string;
+}
+
+interface AvatarGroupProps {
+  avatars: Avatar[];
+  totalCount: number;
+  className?: string;
+}
+
+const AvatarGroup = ({ avatars, totalCount, className = "" }: AvatarGroupProps) => {
+  const remainingCount = totalCount - avatars.length;
+
+  return (
+    <div className={cls("flex items-center gap-3", className)}>
+      <div className="flex -space-x-2">
+        {avatars.map((avatar, index) => (
+          <div key={index} className="w-10 h-10 rounded-full border-2 border-background overflow-hidden shrink-0 relative">
+             <ImageOrVideo imageSrc={avatar.src} alt={avatar.alt} className="w-full h-full object-cover" />
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div className="flex items-center justify-center w-10 h-10 rounded-full bg-accent text-sm font-medium text-foreground border-2 border-background shrink-0 relative z-10">
+            +{remainingCount > 999 ? `${Math.floor(remainingCount / 1000)}k` : remainingCount}
+          </div>
+        )}
+      </div>
+      <span className="text-sm font-medium text-foreground">
+        Join {totalCount.toLocaleString()}+ happy users
+      </span>
+    </div>
+  );
+};
+
+export default AvatarGroup;