feat(AvatarCircles): updated avatarcircles component to support profi…

…le urls
magicuidesign · Sep 19, 2024 · 582d5c7 · 582d5c7
1 parent da09762
commit 582d5c7
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 20 deletions.
diff --git a/registry/components/example/avatar-circles-demo.tsx b/registry/components/example/avatar-circles-demo.tsx
@@ -1,12 +1,29 @@
 import AvatarCircles from "@/components/magicui/avatar-circles";
 
-const avatarUrls = [
-  "https://avatars.githubusercontent.com/u/16860528",
-  "https://avatars.githubusercontent.com/u/20110627",
-  "https://avatars.githubusercontent.com/u/106103625",
-  "https://avatars.githubusercontent.com/u/59228569",
+// Make Your DB call here is extract users image and profile url
+const avatars = [
+  {
+    imageUrl: "https://avatars.githubusercontent.com/u/16860528",
+    profileUrl: "https://github.com/dillionverma",
+  },
+  {
+    imageUrl: "https://avatars.githubusercontent.com/u/20110627",
+    profileUrl: "https://github.com/tomonarifeehan",
+  },
+  {
+    imageUrl: "https://avatars.githubusercontent.com/u/106103625",
+    profileUrl: "https://github.com/BankkRoll",
+  },
+  {
+    imageUrl: "https://avatars.githubusercontent.com/u/59228569",
+    profileUrl: "https://github.com/safethecode",
+  },
+  {
+    imageUrl: "https://avatars.githubusercontent.com/u/59442788",
+    profileUrl: "https://github.com/sanjay-mali",
+  },
 ];
 
 export default async function AvatarCirclesDemo() {
-  return <AvatarCircles numPeople={99} avatarUrls={avatarUrls} />;
+  return <AvatarCircles numPeople={99} avatarUrls={avatars} />;
 }
diff --git a/registry/components/magicui/avatar-circles.tsx b/registry/components/magicui/avatar-circles.tsx
@@ -4,10 +4,20 @@ import React from "react";
 
 import { cn } from "@/lib/utils";
 
+// interface AvatarCirclesProps {
+//   className?: string;
+//   numPeople?: number;
+//   avatarUrls: string[];
+// }
+interface Avatar {
+  imageUrl: string;
+  profileUrl: string;
+}
+
 interface AvatarCirclesProps {
   className?: string;
   numPeople?: number;
-  avatarUrls: string[];
+  avatarUrls: Avatar[];
 }
 
 const AvatarCircles = ({
@@ -18,21 +28,30 @@ const AvatarCircles = ({
   return (
     <div className={cn("z-10 flex -space-x-4 rtl:space-x-reverse", className)}>
       {avatarUrls.map((url, index) => (
-        <img
+        <a
           key={index}
-          className="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800"
-          src={url}
-          width={40}
-          height={40}
-          alt={`Avatar ${index + 1}`}
-        />
+          href={url.profileUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            key={index}
+            className="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800"
+            src={url.imageUrl}
+            width={40}
+            height={40}
+            alt={`Avatar ${index + 1}`}
+          />
+        </a>
       ))}
-      <a
-        className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
-        href=""
-      >
-        +{numPeople}
-      </a>
+      {numPeople && (
+        <a
+          className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
+          href="#"
+        >
+          +{numPeople}
+        </a>
+      )}
     </div>
   );
 };