From b51d050ee600aa7521abf03d523a5ce7bd98855a Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Mon, 19 Feb 2024 20:13:56 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20button=20to=20the?=
 =?UTF-8?q?=20example=20comopnent=20pag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 9a7a8519..30234712 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from 'components/shared/Button';
 import React from 'react';
 
 const Page = () => {
@@ -15,20 +16,14 @@ const Page = () => {
 
         {/* Insert Components here */}
         <div className="flex flex-col gap-10 items-center justify-between">
-          <h1 className="text-2xl font-bold">Component A</h1>
-
-          <div className="flex flex-row gap-10 items-center justify-center">
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-          </div>
-
-          <div className="flex flex-row gap-10 items-center justify-center">
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+          <h1 className="text-2xl font-bold">Button</h1>
+          <div className="flex gap-10 flex-wrap">
+            <Button size="lg" disabled>
+              Button
+            </Button>
+            <Button size="md">Button</Button>
+            <Button size="sm">Button</Button>
+            <Button size="xs">Button</Button>
           </div>
         </div>
       </div>