refactor(BadgeGroup): use badge component

Author: araujogui

packages/ui-components/Common/Badge/index.module.css

@@ -0,0 +1,28 @@
+@reference "../../styles/index.css";
+
+.badge {
+  @apply rounded-full
+    border
+    px-2.5
+    py-0.5
+    text-center
+    text-white;
+
+  &.default {
+    @apply border-green-200
+          bg-green-600
+          dark:border-green-600;
+  }
+
+  &.error {
+    @apply border-danger-200
+    bg-danger-600
+    dark:border-danger-600;
+  }
+
+  &.warning {
+    @apply border-warning-200
+    bg-warning-600
+    dark:border-warning-600;
+  }
+}

packages/ui-components/Common/Badge/index.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Badge from '@node-core/ui-components/Common/Badge';
+
+type Story = StoryObj<typeof Badge>;
+type Meta = MetaObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    kind: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    kind: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    kind: 'warning',
+  },
+};
+
+export default { component: Badge, args: { children: 'Badge' } } as Meta;

packages/ui-components/Common/Badge/index.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  kind?: 'default' | 'warning' | 'error';
+};
+
+const Badge: FC<PropsWithChildren<BadgeProps>> = ({
+  kind = 'default',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <span
+      className={classNames(styles.badge, styles[kind], className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

packages/ui-components/Common/BadgeGroup/index.module.css

@@ -17,13 +17,7 @@
   }
 
   .badge {
-    @apply mr-2
-      rounded-full
-      border
-      px-2.5
-      py-0.5
-      text-center
-      text-white;
+    @apply mr-2;
   }
 
   .message {
@@ -41,12 +35,6 @@
         dark:text-green-300;
     }
 
-    .badge {
-      @apply border-green-200
-        bg-green-600
-        dark:border-green-600;
-    }
-
     .message {
       @apply text-green-700
         dark:text-green-300;
@@ -64,12 +52,6 @@
         dark:text-danger-300;
     }
 
-    .badge {
-      @apply border-danger-200
-        bg-danger-600
-        dark:border-danger-600;
-    }
-
     .message {
       @apply text-danger-700
         dark:text-danger-300;
@@ -87,12 +69,6 @@
         dark:text-warning-300;
     }
 
-    .badge {
-      @apply border-warning-200
-        bg-warning-600
-        dark:border-warning-600;
-    }
-
     .message {
       @apply text-warning-700
         dark:text-warning-300;

packages/ui-components/Common/BadgeGroup/index.tsx

@@ -1,6 +1,7 @@
 import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
+import Badge from '@node-core/ui-components/Common/Badge';
 import type { LinkLike } from '@node-core/ui-components/types';
 
 import styles from './index.module.css';
@@ -19,7 +20,11 @@ const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
   ...args
 }) => (
   <Component className={`${styles.wrapper} ${styles[kind]}`} {...args}>
-    {badgeText && <span className={styles.badge}>{badgeText}</span>}
+    {badgeText && (
+      <Badge kind={kind} className={styles.badge}>
+        {badgeText}
+      </Badge>
+    )}
     <span className={styles.message}>{children}</span>
     {args.href && <ArrowRightIcon className={styles.icon} />}
   </Component>