feat: add badge (#130)

* feat: add badge

* fix: resolve comments

Author: jeremy-babylonlabs

src/components/Badge/Badge.css

@@ -0,0 +1,55 @@
+.bbn-badge {
+  @apply relative inline-flex;
+
+  &-indicator {
+    @apply absolute z-10 flex items-center justify-center;
+    @apply min-w-5 h-5 px-1 rounded-full;
+    @apply text-xs font-medium leading-none text-white;
+    
+    /* Position variants */
+    &.bbn-badge-top-right {
+      @apply top-0 right-0 translate-x-1/4 -translate-y-1/4;
+    }
+
+    &.bbn-badge-top-left {
+      @apply top-0 left-0 -translate-x-1/4 -translate-y-1/4;
+    }
+
+    &.bbn-badge-bottom-right {
+      @apply bottom-0 right-0 translate-x-1/4 translate-y-1/4;
+    }
+
+    &.bbn-badge-bottom-left {
+      @apply bottom-0 left-0 -translate-x-1/4 translate-y-1/4;
+    }
+
+    /* Color variants */
+    &.bbn-badge-primary {
+      @apply bg-primary-main;
+    }
+
+    &.bbn-badge-secondary {
+      @apply bg-secondary-main;
+    }
+
+    &.bbn-badge-error {
+      @apply bg-error-main;
+    }
+
+    &.bbn-badge-warning {
+      @apply bg-warning-main;
+    }
+
+    &.bbn-badge-info {
+      @apply bg-info-main;
+    }
+
+    &.bbn-badge-success {
+      @apply bg-success-main;
+    }
+  }
+
+  &-content {
+    @apply flex items-center justify-center;
+  }
+} 

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./Badge";
+import { Avatar } from "../Avatar/Avatar";
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithWhiteBorder: Story = {
+  render: () => (
+    <div className="rounded bg-gray-200 p-8">
+      <Badge count={1} position="bottom-right" color="secondary" badgeClassName="border-2 border-white">
+        <Avatar url="/images/fps/lombard.jpeg" alt="Lombard" size="large" />
+      </Badge>
+    </div>
+  ),
+};

src/components/Badge/Badge.tsx

@@ -0,0 +1,62 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { twJoin } from "tailwind-merge";
+import "./Badge.css";
+
+export interface BadgeProps extends PropsWithChildren {
+  /**
+   * The number or content to display in the badge
+   */
+  count?: number | ReactNode;
+  /**
+   * Max count to show. If count is greater than max, show max+
+   */
+  max?: number;
+  /**
+   * The position of the badge
+   */
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  /**
+   * The color of the badge
+   */
+  color?: "primary" | "secondary" | "error" | "warning" | "info" | "success";
+  /**
+   * Additional CSS class for the badge wrapper
+   */
+  className?: string;
+  /**
+   * Additional CSS class for the badge indicator
+   */
+  badgeClassName?: string;
+  /**
+   * Additional CSS class for the badge content
+   */
+  contentClassName?: string;
+}
+
+export function Badge({
+  children,
+  count = 0,
+  max = 99,
+  position = "bottom-right",
+  color = "error",
+  className,
+  badgeClassName,
+  contentClassName,
+}: BadgeProps) {
+  const shouldShow = typeof count === "number" ? count > 0 : count != null;
+  const displayValue = typeof count === "number" && count > max ? `${max}+` : count;
+
+  const positionClass = `bbn-badge-${position}`;
+  const colorClass = `bbn-badge-${color}`;
+
+  return (
+    <div className={twJoin("bbn-badge", className)}>
+      {children}
+      {shouldShow && (
+        <span className={twJoin("bbn-badge-indicator", positionClass, colorClass, badgeClassName)}>
+          <span className={twJoin("bbn-badge-content", contentClassName)}>{displayValue}</span>
+        </span>
+      )}
+    </div>
+  );
+}

src/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from "./Badge";

src/index.tsx

@@ -15,6 +15,7 @@ export * from "./components/Popover";
 export * from "./components/Card";
 export * from "./components/Toggle";
 export * from "./components/List";
+export * from "./components/Badge";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";