fix: re-write Badge to use badge-{color} classes

src/components/Badge/Badge.stories.js → src/components/Badge/Badge.stories.tsx

@@ -21,13 +21,11 @@ export const Default = () => (
 );
 
 export const Pills = () => (
-  <div>
+  <div className="d-flex gap-3">
     {colors.map((color) => (
-      <div>
-        <Badge pill color={color}>
-          {color}
-        </Badge>
-      </div>
+      <Badge pill color={color}>
+        {color}
+      </Badge>
     ))}
   </div>
 );

src/components/Badge/Badge.tsx

@@ -1,3 +1,30 @@
-import { Badge } from 'reactstrap';
+import classNames from 'classnames';
+import React, { type PropsWithChildren } from 'react';
+
+export interface BadgeProps {
+  className?: string;
+  color?: string;
+  href?: string;
+  pill?: boolean;
+  tag?: keyof JSX.IntrinsicElements;
+  [key: string]: any;
+}
+
+function Badge({
+  className,
+  color = 'secondary',
+  href,
+  pill = false,
+  tag: Tag = 'span',
+  ...props
+}: PropsWithChildren<BadgeProps>) {
+  const classes = classNames(className, 'badge', `badge-${color}`, pill ? 'rounded-pill' : false);
+
+  if (href) {
+    Tag = 'a';
+  }
+
+  return <Tag {...props} className={classes} />;
+}
 
 export default Badge;

src/tooling/colors.js

@@ -5,6 +5,7 @@ export const colors = [
   'danger',
   'warning',
   'info',
+  'ai',
   'light',
   'dark',
 ];