feat(components): adding badges components

bootwindui · Nov 15, 2023 · 01b8c08 · 01b8c08
1 parent 1094bdc
commit 01b8c08
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 25 deletions.
diff --git a/packages/badges/src/index copy.tsx b/packages/badges/src/index copy.tsx
@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+
+export interface BadgeProps {
+  variant: 'primary' | 'neutral' | 'warning' | 'success' | 'error';
+  size?: 'small' | 'large';
+  withIcon?: ReactNode;
+  withDot?: boolean;
+}
+
+const DotSvg = () => (
+  <svg
+    className="-ml-0.5 mr-1.5 h-2 w-2 text-white"
+    fill="currentColor"
+    viewBox="0 0 8 8"
+  >
+    <circle cx={4} cy={4} r={3} />
+  </svg>
+);
+
+const Badge: React.FC<BadgeProps> = ({
+  variant,
+  size = 'small',
+  withIcon = null,
+  withDot = false,
+}) => {
+  const baseClasses = `inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium`;
+
+  const sizeClasses = size === 'large' ? 'text-sm' : '';
+
+  const badgeContent = (
+    <>
+      {withDot && (
+        <span className="mr-1.5">
+          <DotSvg />
+        </span>
+      )}
+      {withIcon && <span className="mr-0.5">{withIcon}</span>}
+      Badge
+    </>
+  );
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'primary':
+        return 'bg-[#F2F5FF] text-[#4A72FF]';
+      case 'neutral':
+        return `bg-[#F0F3F9] text-[#5E718D]`;
+      case 'warning':
+        return 'bg-[#FFF9DF] text-[#D8A800]';
+      case 'success':
+        return 'bg-[#E3F6ED] text-[#11A75C]';
+      case 'error':
+        return 'bg-[#FFF5F4] text-[#FF3838]';
+      default:
+        return 'bg-[#F2F5FF] text-[#4A72FF]';
+    }
+  };
+
+  return (
+    <span className={`${baseClasses} ${sizeClasses} ${getVariantClasses()}`}>
+      {badgeContent}
+    </span>
+  );
+};
+
+export default Badge;
diff --git a/packages/badges/src/index.tsx b/packages/badges/src/index.tsx
@@ -5,54 +5,75 @@ export interface BadgeProps {
   size?: 'small' | 'large';
   withIcon?: ReactNode;
   withDot?: boolean;
+  children: string;
 }
 
-const DotSvg = () => (
-  <svg
-    className="-ml-0.5 mr-1.5 h-2 w-2 text-indigo-400"
-    fill="currentColor"
-    viewBox="0 0 8 8"
-  >
-    <circle cx={4} cy={4} r={3} />
-  </svg>
-);
+interface DotSvgProps {
+  variant: BadgeProps['variant'];
+}
+
+const DotSvg: React.FC<DotSvgProps> = ({ variant }) => {
+  const getTextColor = () => {
+    switch (variant) {
+      case 'primary':
+        return ' text-[#4A72FF]';
+      case 'neutral':
+        return 'text-[#5E718D]';
+      case 'warning':
+        return 'text-[#D8A800]';
+      case 'success':
+        return 'text-[#11A75C]';
+      case 'error':
+        return 'text-[#FF3838]';
+      default:
+        return 'text-[#4A72FF]';
+    }
+  };
+
+  return (
+    <svg
+      className={`-ml-0.5 mr-1.5 h-2 w-2 ${getTextColor()}`}
+      fill="currentColor"
+      viewBox="0 0 8 8"
+    >
+      <circle cx={4} cy={4} r={3} />
+    </svg>
+  );
+};
 
 const Badge: React.FC<BadgeProps> = ({
   variant,
   size = 'small',
   withIcon = null,
   withDot = false,
+  children,
 }) => {
-  const baseClasses = `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium`;
+  const baseClasses = `inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium`;
 
   const sizeClasses = size === 'large' ? 'text-sm' : '';
 
   const badgeContent = (
     <>
-      {withDot && (
-        <span className="mr-1.5">
-          <DotSvg />
-        </span>
-      )}
-      {withIcon && <span className="mr-0.5">{withIcon}</span>}
-      Badge
+      {withDot && <DotSvg variant={variant} />}
+      {withIcon && <span className="mr-1.5">{withIcon}</span>}
+      {children}
     </>
   );
 
   const getVariantClasses = () => {
     switch (variant) {
       case 'primary':
-        return 'bg-blue-500 text-white';
+        return 'bg-[#F2F5FF] text-[#4A72FF]';
       case 'neutral':
-        return `bg-gray-300 text-gray-800`;
+        return `bg-[#F0F3F9] text-[#5E718D]`;
       case 'warning':
-        return 'bg-yellow-500 text-white';
+        return 'bg-[#FFF9DF] text-[#D8A800]';
       case 'success':
-        return 'bg-green-500 text-white';
+        return 'bg-[#E3F6ED] text-[#11A75C]';
       case 'error':
-        return 'bg-red-500 text-white';
+        return 'bg-[#FFF5F4] text-[#FF3838]';
       default:
-        return `bg-gray-300 text-gray-800`;
+        return 'bg-[#F2F5FF] text-[#4A72FF]';
     }
   };
 

diff --git a/packages/badges/stories/Badges.stories.tsx b/packages/badges/stories/Badges.stories.tsx
@@ -1,7 +1,7 @@
-// Badge.stories.tsx
 import React from 'react';
 import { Story, 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',
@@ -22,7 +22,15 @@ export default {
   },
 } as Meta;
 
-const Template: Story<BadgeProps> = args => <Badge {...args} />;
+const Template: Story<BadgeProps> = args => <Badge {...args}> test </Badge>;
+
+export const BasicBadge = () => (
+  <>
+    <Badge variant="warning" withIcon={<FaRegEnvelope />}>
+      test cik
+    </Badge>
+  </>
+);
 
 export const Primary = Template.bind({});
 Primary.args = {