From 5660f8a8b3b586dcf2c42f03a1934eebafdb71d5 Mon Sep 17 00:00:00 2001
From: Raju kadel <rajukadel.github@gmail.com>
Date: Fri, 27 Sep 2024 21:33:22 +0545
Subject: [PATCH 1/3] feat: getting started with stack-avatars

---
 src/components/avatar/stack-avatars.tsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/components/avatar/stack-avatars.tsx

diff --git a/src/components/avatar/stack-avatars.tsx b/src/components/avatar/stack-avatars.tsx
new file mode 100644
index 000000000..6b9a61ca0
--- /dev/null
+++ b/src/components/avatar/stack-avatars.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const StackAvatars = () => {
+  return <div>StackAvatars</div>;
+};
+
+export default StackAvatars;

From 3d900f6344c80ed1bbd8315a382d2531ed7c2a3f Mon Sep 17 00:00:00 2001
From: Raju kadel <rajukadel.github@gmail.com>
Date: Sat, 28 Sep 2024 12:43:44 +0545
Subject: [PATCH 2/3] chore: remove unused code

---
 src/components/avatar/stack-avatars.tsx | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/components/avatar/stack-avatars.tsx

diff --git a/src/components/avatar/stack-avatars.tsx b/src/components/avatar/stack-avatars.tsx
deleted file mode 100644
index 6b9a61ca0..000000000
--- a/src/components/avatar/stack-avatars.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const StackAvatars = () => {
-  return <div>StackAvatars</div>;
-};
-
-export default StackAvatars;

From 9dfec69ab0c72419150d20fd54ba005140904a0c Mon Sep 17 00:00:00 2001
From: Raju kadel <rajukadel.github@gmail.com>
Date: Sat, 28 Sep 2024 12:45:04 +0545
Subject: [PATCH 3/3] feat: stack avatar ui component

---
 src/components/ui/avatar-stack.tsx | 107 +++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 src/components/ui/avatar-stack.tsx

diff --git a/src/components/ui/avatar-stack.tsx b/src/components/ui/avatar-stack.tsx
new file mode 100644
index 000000000..fe0aa13c7
--- /dev/null
+++ b/src/components/ui/avatar-stack.tsx
@@ -0,0 +1,107 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+const avatarStackVariants = cva("flex", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row",
+    },
+    spacing: {
+      sm: "-space-x-5 -space-y-5",
+      md: "-space-x-4 -space-y-4",
+      lg: "-space-x-3 -space-y-3",
+      xl: "-space-x-2 -space-y-2",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    spacing: "md",
+  },
+});
+
+export interface AvatarStackProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarStackVariants> {
+  avatars: { name: string; image: string }[];
+  maxAvatarsAmount?: number;
+}
+
+const AvatarStack = ({
+  className,
+  orientation,
+  avatars,
+  spacing,
+  maxAvatarsAmount = 3,
+  ...props
+}: AvatarStackProps) => {
+  const shownAvatars = avatars.slice(0, maxAvatarsAmount);
+  const hiddenAvatars = avatars.slice(maxAvatarsAmount);
+
+  return (
+    <div
+      className={cn(
+        avatarStackVariants({ orientation, spacing }),
+        className,
+        orientation === "vertical" ? "-space-x-0" : "-space-y-0",
+      )}
+      {...props}
+    >
+      {shownAvatars.map(({ name, image }, index) => (
+        <TooltipProvider delayDuration={300} key={`${image}-${index + 1}`}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Avatar
+                className={cn(
+                  avatarStackVariants(),
+                  "rounded-full border-2 border-white hover:z-10",
+                )}
+              >
+                <AvatarImage src={image} />
+                <AvatarFallback>
+                  {name
+                    ?.split(" ")
+                    ?.map((word) => word[0])
+                    ?.join("")
+                    ?.toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{name}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
+
+      {hiddenAvatars.length ? (
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Avatar key="Excesive avatars">
+                <AvatarFallback className="bg-gray-200">
+                  +{avatars.length - shownAvatars.length}
+                </AvatarFallback>
+              </Avatar>
+            </TooltipTrigger>
+            <TooltipContent>
+              {hiddenAvatars.map(({ name }, index) => (
+                <p key={`${name}-${index + 1}`}>{name}</p>
+              ))}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : null}
+    </div>
+  );
+};
+
+export { AvatarStack, avatarStackVariants };