From 6f38309db8defd67677aef9c8c92106a1d9b9a66 Mon Sep 17 00:00:00 2001 From: Sanjay Mali Date: Thu, 19 Sep 2024 11:39:37 +0530 Subject: [PATCH 1/3] feat(HeroVideoDialog): add support for dynamic gradient colors --- content/docs/components/hero-video-dialog.mdx | 3 +++ .../components/magicui/hero-video-dialog.tsx | 27 ++++++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/content/docs/components/hero-video-dialog.mdx b/content/docs/components/hero-video-dialog.mdx index ff3ed482..4b763384 100644 --- a/content/docs/components/hero-video-dialog.mdx +++ b/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. diff --git a/registry/components/magicui/hero-video-dialog.tsx b/registry/components/magicui/hero-video-dialog.tsx index a0cf2c37..e3e1d7af 100644 --- a/registry/components/magicui/hero-video-dialog.tsx +++ b/registry/components/magicui/hero-video-dialog.tsx @@ -1,6 +1,7 @@ "use client"; import { useState } from "react"; +import clsx from "clsx"; import { AnimatePresence, motion } from "framer-motion"; import { Play, XIcon } from "lucide-react"; @@ -22,6 +23,8 @@ interface HeroVideoProps { thumbnailSrc: string; thumbnailAlt?: string; className?: string; + startColor?: string; + endColor?: string; } const animationVariants = { @@ -73,10 +76,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 (
Date: Thu, 19 Sep 2024 11:56:31 +0530 Subject: [PATCH 2/3] feat(HeroVideoDialog): removing unnecessary import code --- registry/components/magicui/hero-video-dialog.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/registry/components/magicui/hero-video-dialog.tsx b/registry/components/magicui/hero-video-dialog.tsx index e3e1d7af..dbdcdf01 100644 --- a/registry/components/magicui/hero-video-dialog.tsx +++ b/registry/components/magicui/hero-video-dialog.tsx @@ -1,7 +1,6 @@ "use client"; import { useState } from "react"; -import clsx from "clsx"; import { AnimatePresence, motion } from "framer-motion"; import { Play, XIcon } from "lucide-react"; From 582d5c7f4adaed50af61e6239cf1d1a07b181332 Mon Sep 17 00:00:00 2001 From: Sanjay Mali Date: Thu, 19 Sep 2024 12:57:21 +0530 Subject: [PATCH 3/3] feat(AvatarCircles): updated avatarcircles component to support profile urls --- .../example/avatar-circles-demo.tsx | 29 +++++++++--- .../components/magicui/avatar-circles.tsx | 47 +++++++++++++------ 2 files changed, 56 insertions(+), 20 deletions(-) diff --git a/registry/components/example/avatar-circles-demo.tsx b/registry/components/example/avatar-circles-demo.tsx index d314e81b..cb43af22 100644 --- 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 ; + return ; } diff --git a/registry/components/magicui/avatar-circles.tsx b/registry/components/magicui/avatar-circles.tsx index aa69cef9..a7ff3baa 100644 --- 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 (
{avatarUrls.map((url, index) => ( - {`Avatar + href={url.profileUrl} + target="_blank" + rel="noopener noreferrer" + > + {`Avatar + ))} - - +{numPeople} - + {numPeople && ( + + +{numPeople} + + )}
); };