feat(docs): enhance Badge component with additional variants and icon handling

Author: lukasz-hycom

apps/docs/src/components/Badge/index.tsx

@@ -3,18 +3,33 @@ import React from 'react';
 
 interface BadgeProps {
     title: string;
-    icon?: string | null;
-    variant?: 'primary' | 'secondary';
+    icon?: string | null | React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'light' | 'dark';
 }
 
+const getVariantClasses = (variant: BadgeProps['variant']): string => {
+    switch (variant) {
+        case 'primary':
+            return 'bg-violet text-white!';
+        case 'secondary':
+            return 'bg-secondary text-dark-text!';
+        case 'light':
+            return 'bg-white text-violet';
+        case 'dark':
+            return 'bg-white/10 text-white';
+        default:
+            return 'bg-violet text-white!';
+    }
+};
+
 const Badge: React.FC<BadgeProps> = ({ title, icon, variant = 'primary' }) => (
     <div
         className={clsx(
             'flex items-center justify-center gap-2.5 px-2.5 py-0.5 rounded-full',
-            variant === 'primary' ? 'bg-violet text-white!' : 'bg-secondary text-dark-text!',
+            getVariantClasses(variant),
         )}
     >
-        {icon && <img src={icon} alt={title + ' logo'} className="w-4 h-4" />}
+        {icon && typeof icon === 'string' ? <img src={icon} alt={title + ' logo'} className="w-4 h-4" /> : icon}
         <span className={clsx('text-sm', variant === 'primary' ? '' : 'font-semibold')}>{title}</span>
     </div>
 );