From b2550784316c5057507d9ae5d11685c9447b7dfd Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 20 Feb 2024 18:25:13 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20checkbox=20to=20ex?=
 =?UTF-8?q?ample=20component=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 8c23f341..4d56aa61 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -1,6 +1,7 @@
-import { Button, ButtonOrLinkProps } from 'components/shared/Button';
-import { PlusIcon } from 'components/shared/CustomIcon';
 import React from 'react';
+import { Button, ButtonOrLinkProps } from 'components/shared/Button';
+import { Checkbox } from 'components/shared/Checkbox';
+import { PlusIcon } from 'components/shared/CustomIcon';
 
 const Page = () => {
   return (
@@ -69,6 +70,35 @@ 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">Checkbox</h1>
+          <div className="flex gap-10 flex-wrap">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Checkbox
+                id={`checkbox-${index + 1}`}
+                key={index}
+                label={`Label ${index + 1}`}
+                disabled={index === 2 || index === 4 ? true : false}
+                checked={index === 4 ? true : undefined}
+                value={`value-${index + 1}`}
+              />
+            ))}
+          </div>
+          <div className="flex gap-10 flex-wrap">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <Checkbox
+                id={`checkbox-description-${index + 1}`}
+                key={index}
+                label={`Label ${index + 1}`}
+                description={`Description of the checkbox ${index + 1}`}
+                value={`value-with-description-${index + 1}`}
+              />
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   );