From 300b8e4b5e2e132013d1fd54fa2028c622f97577 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 15:30:53 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20modal=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   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index feee4595..85e5631e 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -35,6 +35,8 @@ import {
 import { renderDefaultTag, renderMinimalTag } from './renders/tag';
 import { renderToast, renderToastsWithCta } from './renders/toast';
 import { renderTooltips } from './renders/tooltip';
+import { Button } from 'components/shared/Button';
+import { Modal } from 'components/shared/Modal';
 
 const Page: React.FC = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -43,6 +45,7 @@ const Page: React.FC = () => {
     useState<string>('Test 1');
   const [switchValue, setSwitchValue] = useState(false);
   const [selectedRadio, setSelectedRadio] = useState<string>('');
+  const [openModal, setOpenModal] = useState(false);
 
   return (
     <div className="relative h-full min-h-full">
@@ -57,6 +60,31 @@ const Page: React.FC = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
+        {/* Modal */}
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Modal</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              <Modal open={openModal}>
+                <Modal.Trigger asChild>
+                  <Button onClick={() => setOpenModal(true)}>Open modal</Button>
+                </Modal.Trigger>
+                <Modal.Content>
+                  <Modal.Header>Modal title</Modal.Header>
+                  <Modal.Body>
+                    <p>Modal content</p>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <Button onClick={() => setOpenModal(false)}>Close</Button>
+                  </Modal.Footer>
+                </Modal.Content>
+              </Modal>
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
         {/* Steps */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <div className="flex flex-col gap-10 items-center justify-between">