refactor(console): drawer component (#379)

packages/console/src/components/Drawer/index.module.scss

@@ -0,0 +1,28 @@
+@use '@/scss/underscore' as _;
+
+.content {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  outline: none;
+  background: var(--color-card-background);
+  padding: _.unit(6);
+  overflow-y: auto;
+
+  .headline {
+    display: flex;
+    justify-content: right;
+
+    > svg {
+      cursor: pointer;
+    }
+  }
+}
+
+.overlay {
+  position: fixed;
+  background: rgba(0, 0, 0, 40%);
+  inset: 0;
+}

packages/console/src/components/Drawer/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+
+import Close from '@/icons/Close';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+};
+
+const Drawer = ({ isOpen, onClose, children }: Props) => {
+  return (
+    <ReactModal
+      shouldCloseOnOverlayClick
+      isOpen={isOpen}
+      className={styles.content}
+      overlayClassName={styles.overlay}
+      onRequestClose={onClose}
+    >
+      <div className={styles.headline}>
+        <Close
+          onClick={() => {
+            onClose?.();
+          }}
+        />
+      </div>
+      <div>{children}</div>
+    </ReactModal>
+  );
+};
+
+export default Drawer;

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -56,22 +56,6 @@
   }
 }
 
-.readme {
-  background: var(--color-card-background);
-  padding: _.unit(6);
-  height: 100%;
-  overflow-y: auto;
-
-  .headline {
-    display: flex;
-    justify-content: right;
-
-    > svg {
-      cursor: pointer;
-    }
-  }
-}
-
 .actions {
   border-top: 1px solid var(--color-border);
   display: flex;

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -2,7 +2,6 @@ import { ConnectorDTO, ConnectorType } from '@logto/schemas';
 import React, { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
-import ReactModal from 'react-modal';
 import { useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
@@ -10,12 +9,11 @@ import BackLink from '@/components/BackLink';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CodeEditor from '@/components/CodeEditor';
+import Drawer from '@/components/Drawer';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import Markdown from '@/components/Markdown';
 import Status from '@/components/Status';
 import TabNav, { TabNavLink } from '@/components/TabNav';
-import Close from '@/icons/Close';
-import * as drawerStyles from '@/scss/drawer.module.scss';
 import { RequestError } from '@/swr';
 import api from '@/utilities/api';
 
@@ -104,24 +102,14 @@ const ConnectorDetails = () => {
                 setIsReadMeOpen(true);
               }}
             />
-            <ReactModal
+            <Drawer
               isOpen={isReadMeOpen}
-              className={drawerStyles.content}
-              overlayClassName={drawerStyles.overlay}
+              onClose={() => {
+                setIsReadMeOpen(false);
+              }}
             >
-              <div className={styles.readme}>
-                <div className={styles.headline}>
-                  <Close
-                    onClick={() => {
-                      setIsReadMeOpen(false);
-                    }}
-                  />
-                </div>
-                <div>
-                  <Markdown>{data.metadata.readme}</Markdown>
-                </div>
-              </div>
-            </ReactModal>
+              <Markdown>{data.metadata.readme}</Markdown>
+            </Drawer>
           </div>
         </Card>
       )}

packages/console/src/scss/drawer.module.scss

@@ -1,14 +0,0 @@
-.content {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  outline: none;
-}
-
-.overlay {
-  position: fixed;
-  background: rgba(0, 0, 0, 40%);
-  inset: 0;
-}