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] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20badge=20to=20the?=
 =?UTF-8?q?=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>
   );