From e482f998a194b8edf7b5f640ade1f7cd546c6722 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 20 Feb 2024 18:50:31 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20badge?=
 =?UTF-8?q?=20comopnent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/Badge/Badge.theme.ts    | 43 +++++++++++++++++++
 .../src/components/shared/Badge/Badge.tsx     | 33 ++++++++++++++
 .../src/components/shared/Badge/index.ts      |  1 +
 3 files changed, 77 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/Badge/Badge.theme.ts
 create mode 100644 packages/frontend/src/components/shared/Badge/Badge.tsx
 create mode 100644 packages/frontend/src/components/shared/Badge/index.ts

diff --git a/packages/frontend/src/components/shared/Badge/Badge.theme.ts b/packages/frontend/src/components/shared/Badge/Badge.theme.ts
new file mode 100644
index 00000000..9019a0da
--- /dev/null
+++ b/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>;
diff --git a/packages/frontend/src/components/shared/Badge/Badge.tsx b/packages/frontend/src/components/shared/Badge/Badge.tsx
new file mode 100644
index 00000000..50bae236
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/src/components/shared/Badge/index.ts b/packages/frontend/src/components/shared/Badge/index.ts
new file mode 100644
index 00000000..9c8edca2
--- /dev/null
+++ b/packages/frontend/src/components/shared/Badge/index.ts
@@ -0,0 +1 @@
+export * from './Badge';

From cc9c24cca119cb7a3d8fcbdbd67cd3b6069635b8 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 20 Feb 2024 18:50:52 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8E=A8=20style:=20add=20new=20font=20?=
 =?UTF-8?q?sizes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/tailwind.config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 92ee77d0..6f6fc6ff 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -12,6 +12,10 @@ export default withMT({
       sans: ['Inter', 'sans-serif'],
     },
     extend: {
+      fontSize: {
+        '2xs': '0.625rem',
+        '3xs': '0.5rem',
+      },
       colors: {
         emerald: {
           100: '#d1fae5',

From f764bea6d18837a270f6ca6b3c2a878000feb2a3 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 20 Feb 2024 18:51:09 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20badge=20to=20t?=
 =?UTF-8?q?he=20example=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 8c23f341..d751a7c5 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -1,3 +1,4 @@
+import { Badge, BadgeProps } from 'components/shared/Badge';
 import { Button, ButtonOrLinkProps } from 'components/shared/Button';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import React from 'react';
@@ -69,6 +70,29 @@ const Page = () => {
             ))}
           </div>
         </div>
+
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <h1 className="text-2xl font-bold">Badge</h1>
+          <div className="space-y-5">
+            {['primary', 'secondary', 'tertiary', 'inset'].map(
+              (variant, index) => (
+                <div className="flex gap-5" key={index}>
+                  {['sm', 'xs'].map((size) => (
+                    <Badge
+                      key={size}
+                      variant={variant as BadgeProps['variant']}
+                      size={size as BadgeProps['size']}
+                    >
+                      1
+                    </Badge>
+                  ))}
+                </div>
+              ),
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );