'use client' import React from 'react'; /** * A reusable SVG component for the flower shape. * Adapts to light and dark mode themes. */ const FlowerIcon = () => ( ); /** * Defines the props for the AnimatedBadge component. */ type AnimatedBadgeProps = { text: string; icon: React.ReactNode; borderColor: string; // e.g., 'via-white', 'via-sky-500' className?: string; // Optional additional classes }; /** * A reusable component for a badge with an animated gradient border. * Supports light and dark mode with Tailwind CSS classes. */ const AnimatedBadge = ({ text, icon, borderColor, className = '' }: AnimatedBadgeProps) => { return (

{icon} {text}

); }; /** * The main App component that demonstrates the usage of AnimatedBadge. */ export default function AnimatedBadgeView(): React.ReactElement { // Data for different border styles const animatedGradientColors = [ 'via-white', 'via-sky-500', 'via-emerald-500', 'via-rose-500', 'via-amber-500', 'via-purple-500', 'via-pink-500', 'via-teal-500', 'via-cyan-500', 'via-indigo-500' ]; return ( <> {/* We inject custom CSS for the animation keyframes. */}

{/* Container for the list of badges */}

{animatedGradientColors.map((colorClass, index) => ( } borderColor={colorClass} /> ))}

); };

Animated Badges

Usage