Feat:Add Support for Profile Links in AvatarCircles Component

content/docs/components/hero-video-dialog.mdx

@@ -54,6 +54,8 @@ npx magicui-cli add hero-video-dialog
 | videoSrc       | string | URL of the video to be played    | -                 |
 | thumbnailSrc   | string | URL of the thumbnail image       | -                 |
 | thumbnailAlt   | string | Alt text for the thumbnail image | "Video thumbnail" |
+| startColor     | string | Start color for the play button  | "#333"            |
+| endColor       | string | End color for the play button    | "#333"            |
 
 ## Animation Styles
 
@@ -71,3 +73,4 @@ The `animationStyle` prop accepts the following values:
 ## Note
 
 - If using a YouTube video, make sure to use the `embed` version of the video URL.
+- Use CSS Colors Only: Accepts hex, RGB, RGBA, or HSL values. Tailwind color classes like red-500 won't work.

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} />;
 }

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>
   );
 };

registry/components/magicui/hero-video-dialog.tsx

@@ -22,6 +22,8 @@ interface HeroVideoProps {
   thumbnailSrc: string;
   thumbnailAlt?: string;
   className?: string;
+  startColor?: string;
+  endColor?: string;
 }
 
 const animationVariants = {
@@ -73,10 +75,28 @@ export default function HeroVideoDialog({
   thumbnailSrc,
   thumbnailAlt = "Video thumbnail",
   className,
+  startColor = "#333",
+  endColor = "#333",
 }: HeroVideoProps) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
   const selectedAnimation = animationVariants[animationStyle];
 
+  // Helper function to detect if the color is a Tailwind color
+  const isTailwindColor = (color: string) => color.includes("-");
+
+  // Conditionally set Tailwind gradient or custom gradient style
+  const gradientColor =
+    isTailwindColor(startColor) && isTailwindColor(endColor)
+      ? `from-${startColor} to-${endColor} bg-gradient-to-b`
+      : "";
+
+  const customGradientStyle =
+    !isTailwindColor(startColor) || !isTailwindColor(endColor)
+      ? {
+          backgroundImage: `linear-gradient(to bottom, ${startColor}, ${endColor})`,
+        }
+      : {};
+
   return (
     <div className={cn("relative", className)}>
       <div
@@ -93,7 +113,11 @@ export default function HeroVideoDialog({
         <div className="absolute inset-0 flex items-center justify-center group-hover:scale-100 scale-[0.9] transition-all duration-200 ease-out rounded-2xl">
           <div className="bg-primary/10 flex items-center justify-center rounded-full backdrop-blur-md size-28">
             <div
-              className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}
+              className={cn(
+                `flex items-center justify-center shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`,
+                gradientColor,
+              )}
+              style={customGradientStyle}
             >
               <Play
                 className="size-8 text-white fill-white group-hover:scale-105 scale-100 transition-transform duration-200 ease-out"