feat: add contact modal

packages/app/src/components/Header/index.tsx

@@ -14,6 +14,7 @@ import { useEditor } from '@/components/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
+import ContactModal from '@/components/contact-modal';
 
 const PopoverContent = () => {
   const { editor, mode, setMode } = useEditor();
@@ -50,6 +51,7 @@ const PopoverContent = () => {
 export const Header = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const [showContactModal, setShowContactModal] = useState(false);
 
   const { editor } = useEditor();
 
@@ -63,38 +65,48 @@ export const Header = () => {
   }, [editor]);
 
   return (
-    <StyledHeader>
-      <StyledLogo>
-        <LogoIcon onClick={() => {}} />
-      </StyledLogo>
-      <StyledTitle
-        onMouseEnter={() => {
-          setIsHover(true);
-        }}
-        onMouseLeave={() => {
-          setIsHover(false);
-        }}
-      >
-        <EditorModeSwitch
-          isHover={isHover}
-          style={{
-            marginRight: '12px',
+    <>
+      <ContactModal
+        open={showContactModal}
+        onClose={() => setShowContactModal(false)}
+      />
+      <StyledHeader>
+        <StyledLogo>
+          <LogoIcon
+            onClick={() => {
+              setShowContactModal(true);
+            }}
+          />
+        </StyledLogo>
+        <StyledTitle
+          onMouseEnter={() => {
+            setIsHover(true);
+          }}
+          onMouseLeave={() => {
+            setIsHover(false);
           }}
-        />
-        <StyledTitleWrapper>{title}</StyledTitleWrapper>
-      </StyledTitle>
-
-      <StyledHeaderRightSide>
-        <ThemeModeSwitch />
-        <Popover
-          popoverContent={<PopoverContent />}
-          style={{ marginLeft: '20px' }}
         >
-          <IconButton>
-            <MoreIcon />
-          </IconButton>
-        </Popover>
-      </StyledHeaderRightSide>
-    </StyledHeader>
+          <EditorModeSwitch
+            isHover={isHover}
+            style={{
+              marginRight: '12px',
+            }}
+          />
+          <StyledTitleWrapper>{title}</StyledTitleWrapper>
+        </StyledTitle>
+
+        <StyledHeaderRightSide>
+          <ThemeModeSwitch />
+          <Popover
+            popoverContent={<PopoverContent />}
+            style={{ marginLeft: '20px' }}
+          >
+            <IconButton>
+              <MoreIcon />
+            </IconButton>
+          </Popover>
+        </StyledHeaderRightSide>
+      </StyledHeader>
+    </>
   );
 };