⚡️ feat: create badge comopnent

packages/frontend/src/components/shared/Badge/Badge.theme.ts

@@ -0,0 +1,43 @@
+import { VariantProps, tv } from 'tailwind-variants';
+
+export const badgeTheme = tv({
+  slots: {
+    wrapper: ['rounded-full', 'grid', 'place-content-center'],
+  },
+  variants: {
+    variant: {
+      primary: {
+        wrapper: ['bg-controls-primary', 'text-elements-on-primary'],
+      },
+      secondary: {
+        wrapper: ['bg-controls-secondary', 'text-elements-on-secondary'],
+      },
+      tertiary: {
+        wrapper: [
+          'bg-controls-tertiary',
+          'border',
+          'border-border-interactive/10',
+          'text-elements-high-em',
+          'shadow-button',
+        ],
+      },
+      inset: {
+        wrapper: ['bg-controls-inset', 'text-elements-high-em'],
+      },
+    },
+    size: {
+      sm: {
+        wrapper: ['h-5', 'w-5', 'text-xs'],
+      },
+      xs: {
+        wrapper: ['h-4', 'w-4', 'text-2xs', 'font-medium'],
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'sm',
+  },
+});
+
+export type BadgeTheme = VariantProps<typeof badgeTheme>;

packages/frontend/src/components/shared/Badge/Badge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { BadgeTheme, badgeTheme } from './Badge.theme';
+
+export interface BadgeProps
+  extends ComponentPropsWithoutRef<'div'>,
+    BadgeTheme {}
+
+/**
+ * A badge is a small status descriptor for UI elements.
+ * It can be used to indicate a status, a count, or a category.
+ * It is typically used in lists, tables, or navigation elements.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="sm">1</Badge
+ * ```
+ */
+export const Badge = ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: BadgeProps) => {
+  const { wrapper } = badgeTheme();
+
+  return (
+    <div {...props} className={wrapper({ className, variant, size })}>
+      {children}
+    </div>
+  );
+};

packages/frontend/src/components/shared/Badge/index.ts

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