Add Badge Tooltip (#293)

src/components/Badge.jsx

@@ -1,26 +1,81 @@
-export function Badge({ status, text }) {
+import { useState } from 'react';
+
+export function Badge({ status, text, hoverText }) {
+    const [isHovered, setIsHovered] = useState(false);
+
     const getStatusStyles = (status) => {
         switch (status) {
             case 'info':
-                // Never tested colors
-                return 'bg-blue-300/30 text-blue-400 dark:bg-blue-400/10 dark:text-blue-400';
+                return 'text-blue-400';
             case 'warning':
-                return 'bg-orange-300/30 text-orange-400 dark:bg-yellow-600/10 dark:text-yellow-600';
+                return 'text-yellow-600';
             case 'error':
-                // Never tested colors
-                return 'bg-red-300/30 text-red-400 dark:bg-red-400/10 dark:text-red-400';
+                return 'text-red-400';
             case 'cloud-only':
-                return 'bg-orange-200/50 text-orange-400 dark:bg-orange-600/20 dark:text-orange-400';
+                return 'text-orange-400';
             case 'experimental':
-                return 'bg-teal-200/50 text-teal-400 dark:bg-teal-500/15 dark:text-teal-400';
+                return 'text-teal-400';
             default:
-                return 'bg-gray-500/30 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400';
+                return 'text-gray-400';
         }
     };
 
-    const baseStyle = 'rounded-md py-0.5 px-2 text-sm';
+    const getStatusBorder = (status) => {
+        switch (status) {
+            case 'info':
+                return 'border-blue-400';
+            case 'warning':
+                return 'border-yellow-600';
+            case 'error':
+                return 'border-red-400';
+            case 'cloud-only':
+                return 'border-orange-400';
+            case 'experimental':
+                return 'border-teal-400';
+            default:
+                return 'border-gray-400';
+        }
+    };
 
-    const statusStyle = getStatusStyles(status);
+    const getBadgeBg = (status) => {
+        switch (status) {
+            case 'info':
+                return 'bg-blue-300/30 dark:bg-blue-400/10';
+            case 'warning':
+                return 'bg-orange-300/30 dark:bg-yellow-600/10';
+            case 'error':
+                return 'bg-red-300/30 dark:bg-red-400/10';
+            case 'cloud-only':
+                return 'bg-orange-200/50 dark:bg-orange-600/20';
+            case 'experimental':
+                return 'bg-teal-200/50 dark:bg-teal-500/15';
+            default:
+                return 'bg-gray-500/30 dark:bg-gray-400/10';
+        }
+    };
 
-    return <span className={`${baseStyle} ${statusStyle}`}>{text}</span>;
-}
+    const baseStyle = 'relative inline-block rounded-md py-0.5 px-2 text-sm';
+    const textColor = getStatusStyles(status);
+    const bgColor = getBadgeBg(status);
+    const borderStyle = getStatusBorder(status);
+
+    return (
+        <span
+            className={`${baseStyle} ${bgColor} ${textColor}`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {text}
+            {hoverText && isHovered && (
+                <div className={`
+                    absolute z-10 left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs p-3
+                    rounded-md whitespace-pre-line
+                    dark:bg-zinc-900/5 bg-white-900/5 backdrop-blur-md border ${borderStyle}
+                    ${textColor} shadow-lg
+                `}>
+                    {hoverText}
+                </div>
+            )}
+        </span>
+    );
+}