feat: add Modal component to common ui

packages/app/src/pages/affine.tsx

@@ -1,7 +1,8 @@
 import { displayFlex, styled } from '@/styles';
 import { ThemeModeSwitch } from '@/components/theme-mode-switch';
 import { Loading } from '@/components/loading';
-
+import Modal from '@/ui/modal';
+import { useState } from 'react';
 export const StyledHeader = styled('div')({
   height: '60px',
   width: '100vw',
@@ -12,11 +13,27 @@ export const StyledHeader = styled('div')({
 });
 
 const Affine = () => {
+  const [show, setShow] = useState(false);
   return (
     <>
       <StyledHeader>
         <ThemeModeSwitch></ThemeModeSwitch>
+        <button
+          onClick={() => {
+            setShow(true);
+          }}
+        >
+          click me!
+        </button>
       </StyledHeader>
+      <Modal
+        open={show}
+        onClose={() => {
+          setShow(false);
+        }}
+      >
+        <div>hi</div>
+      </Modal>
       <Loading />
     </>
   );