From c14243f633b16f41721575808883bf718cfc819b Mon Sep 17 00:00:00 2001
From: bigint <bigint@hey.xyz>
Date: Mon, 5 Aug 2024 13:08:01 +0530
Subject: [PATCH 1/2] feat: add design system for Modal

---
 .../web/src/components/Design/ModalDesign.tsx | 72 +++++++++++++++++++
 apps/web/src/components/Design/index.tsx      |  2 +
 2 files changed, 74 insertions(+)
 create mode 100644 apps/web/src/components/Design/ModalDesign.tsx

diff --git a/apps/web/src/components/Design/ModalDesign.tsx b/apps/web/src/components/Design/ModalDesign.tsx
new file mode 100644
index 000000000000..cb43d06e5231
--- /dev/null
+++ b/apps/web/src/components/Design/ModalDesign.tsx
@@ -0,0 +1,72 @@
+import { ShoppingBagIcon } from '@heroicons/react/24/outline';
+import { Button, Card, CardHeader, Modal } from '@hey/ui';
+import { type FC, useState } from 'react';
+
+const ModalDesign: FC = () => {
+  const [showXsModal, setShowXsModal] = useState(false);
+  const [showSmModal, setShowSmModal] = useState(false);
+  const [showMdModal, setShowMdModal] = useState(false);
+  const [showLgModal, setShowLgModal] = useState(false);
+
+  const children = (
+    <div className="p-5">The quick brown fox jumps over the lazy dog.</div>
+  );
+
+  return (
+    <Card>
+      <CardHeader title="Alerts" />
+      <Modal
+        icon={<ShoppingBagIcon className="size-5" />}
+        onClose={() => setShowXsModal(false)}
+        show={showXsModal}
+        size="xs"
+        title="Extra small modal"
+      >
+        {children}
+      </Modal>
+      <Modal
+        icon={<ShoppingBagIcon className="size-5" />}
+        onClose={() => setShowSmModal(false)}
+        show={showSmModal}
+        size="sm"
+        title="Small modal"
+      >
+        {children}
+      </Modal>
+      <Modal
+        icon={<ShoppingBagIcon className="size-5" />}
+        onClose={() => setShowMdModal(false)}
+        show={showMdModal}
+        size="md"
+        title="Medium modal"
+      >
+        {children}
+      </Modal>
+      <Modal
+        icon={<ShoppingBagIcon className="size-5" />}
+        onClose={() => setShowLgModal(false)}
+        show={showLgModal}
+        size="lg"
+        title="Large modal"
+      >
+        {children}
+      </Modal>
+      <div className="m-5 flex gap-5">
+        <Button onClick={() => setShowXsModal(true)} outline>
+          Show extra small modal
+        </Button>
+        <Button onClick={() => setShowSmModal(true)} outline>
+          Show small modal
+        </Button>
+        <Button onClick={() => setShowMdModal(true)} outline>
+          Show medium modal
+        </Button>
+        <Button onClick={() => setShowLgModal(true)} outline>
+          Show large modal
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+export default ModalDesign;
diff --git a/apps/web/src/components/Design/index.tsx b/apps/web/src/components/Design/index.tsx
index fdbbb0fccd5c..d8cccb6d7ce6 100644
--- a/apps/web/src/components/Design/index.tsx
+++ b/apps/web/src/components/Design/index.tsx
@@ -5,6 +5,7 @@ import { GridItemTwelve } from '@hey/ui/src/GridLayout';
 
 import AlertDesign from './AlertDesign';
 import ButtonsDesign from './ButtonsDesign';
+import ModalDesign from './ModalDesign';
 import ProfilesDesign from './ProfilesDesign';
 import TypographyDesign from './TypographyDesign';
 
@@ -15,6 +16,7 @@ const Design: NextPage = () => {
         <TypographyDesign />
         <ButtonsDesign />
         <AlertDesign />
+        <ModalDesign />
         <ProfilesDesign />
       </GridItemTwelve>
     </GridLayout>

From ef2f8a0b30b967e10170ad1bbea44d0e0cd37b7f Mon Sep 17 00:00:00 2001
From: bigint <bigint@hey.xyz>
Date: Mon, 5 Aug 2024 13:08:30 +0530
Subject: [PATCH 2/2] feat: add design system for Modal

---
 apps/web/src/components/Design/ModalDesign.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/Design/ModalDesign.tsx b/apps/web/src/components/Design/ModalDesign.tsx
index cb43d06e5231..8f6c4ecbaea4 100644
--- a/apps/web/src/components/Design/ModalDesign.tsx
+++ b/apps/web/src/components/Design/ModalDesign.tsx
@@ -14,7 +14,7 @@ const ModalDesign: FC = () => {
 
   return (
     <Card>
-      <CardHeader title="Alerts" />
+      <CardHeader title="Modals" />
       <Modal
         icon={<ShoppingBagIcon className="size-5" />}
         onClose={() => setShowXsModal(false)}