feat(components): badge

packages/badge/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@bootwind/badge",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14",
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "tailwind-merge": "^2.0.0"
+  }
+}

packages/badge/src/index.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+type ButtonSize = 'sm' | 'md' ;
+type BadgeVariant = 'primary' | 'neutral' | 'warning' | 'success' | 'error';
+
+export interface BadgeProps {
+  variant?: BadgeVariant;
+  type?: "light" | "strong"
+  size?: ButtonSize;
+  children?: ReactNode
+}
+
+export const Badge = ({
+  variant = 'primary',
+  size = 'sm',
+  type = "light",
+  children,
+  ...props
+}: BadgeProps) => {
+  const baseStyles = ''
+
+  const sizeStyles = {
+    sm: 'px-2 py-0.5 text-xs rounded-md',
+    md: 'px-4 py-2 text-base rounded-md',
+  };
+
+  const colorStyles = {
+    primary: 'bg-light-primary text-primary',
+    neutral: 'bg-slate-500 text-slate-100',
+    warning: 'bg-slate-500 text-slate-100',
+    success: 'bg-slate-500 text-slate-100',
+    error: 'bg-slate-500 text-slate-100',
+  };
+
+  const badgeStyles = `${baseStyles} ${sizeStyles[size]} ${colorStyles[variant]}`;
+
+  return (
+    <>
+    <span className={badgeStyles} {...props}>
+      {children}
+    </span>
+    </>
+  );
+};

packages/badge/stories/Badge.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Badge, BadgeProps } from '../src/index';
+
+import { FaRegEnvelope } from 'react-icons/fa6'; // Import ikon dari react-icons atau dari sumber lain
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
+    },
+    size: {
+      control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
+    },
+  },
+} as Meta;
+
+export const Variants = (args: BadgeProps) => {
+  const variants = [
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+  ];
+  return (
+    <div >
+      <Badge>Primary</Badge>
+    </div>
+  )
+}
+
+export const Sizes = (args: BadgeProps) => (
+  <div className="flex flex-col space-y-4 mt-8">
+
+  </div>
+);

packages/badge/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}

tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
     extend: {
       colors: {
         primary: '#5E72E4',
+        light: {
+          primary: '#F2F5FF'
+        }
       },
     },
   },