Merge pull request #1038 from Tharsiga-21/patch-1

fix: standardize icon sizing inside Badge component

Author: SB2318

src/components/ui/Badge.tsx

@@ -43,6 +43,11 @@ const sizeClasses: Record<BadgeSize, string> = {
   md: "px-3.5 py-1 text-sm",
 };
 
+const iconSizeClasses: Record<BadgeSize, string> = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+};
+
 const interactiveClasses =
   "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current disabled:cursor-not-allowed disabled:opacity-60";
 
@@ -62,87 +67,34 @@ const getBadgeClasses = (
     .filter(Boolean)
     .join(" ");
 
-const renderBadgeContent = (
-  icon: React.ReactNode,
-  children: React.ReactNode,
-  label?: string
-) => {
-  const content = children ?? label;
-
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full font-medium transition-colors ${variantClasses[variant]} ${sizeClasses[size]}`}
-    >
-      {icon && <span className="flex-shrink-0">{icon}</span>}
-      {content}
-    </>
-  );
-};
-
 const Badge = (props: BadgeProps) => {
-  if (props.as === "button") {
-    const {
-      as: Component,
-      label,
-      children,
-      variant = "default",
-      size = "md",
-      icon,
-      className,
-      type = "button",
-      ...buttonProps
-    } = props;
-
-    return (
-      <Component
-        type={type}
-        className={getBadgeClasses(variant, size, true, className)}
-        {...buttonProps}
-      >
-        {renderBadgeContent(icon, children, label)}
-      </Component>
-    );
-  }
-
-  if (props.as === "a") {
-    const {
-      as: Component,
-      label,
-      children,
-      variant = "default",
-      size = "md",
-      icon,
-      className,
-      ...anchorProps
-    } = props;
-
-    return (
-      <Component
-        className={getBadgeClasses(variant, size, true, className)}
-        {...anchorProps}
-      >
-        {renderBadgeContent(icon, children, label)}
-      </Component>
-    );
-  }
-
   const {
     as: Component = "span",
     label,
     children,
     variant = "default",
     size = "md",
     icon,
-    className,
-    ...spanProps
-  } = props;
+    className = "",
+    ...restProps
+  } = props as BadgeSpanProps & BadgeButtonProps & BadgeAnchorProps;
+
+  const isInteractive = Component === "button" || Component === "a";
 
   return (
     <Component
-      className={getBadgeClasses(variant, size, false, className)}
-      {...spanProps}
+      className={getBadgeClasses(variant, size, isInteractive, className)}
+      {...restProps}
     >
-      {renderBadgeContent(icon, children, label)}
+      {icon && (
+        <span
+          className={`inline-flex items-center justify-center shrink-0 text-current ${iconSizeClasses[size]}`}
+          aria-hidden="true"
+        >
+          {icon}
+        </span>
+      )}
+      {children ?? label}
     </Component>
   );
 };