feat: create header components for mobile and desktop view

DLC-link · Sep 30, 2024 · 94ccb2b · 94ccb2b
1 parent f9a7845
commit 94ccb2b
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 66 deletions.
diff --git a/src/app/components/header/components/desktop-header.tsx b/src/app/components/header/components/desktop-header.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { HStack } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+import { NavigationTabs } from './tabs';
+
+interface DesktopHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+  handleTabClick: (route: string) => void;
+}
+
+const DesktopHeader: React.FC<DesktopHeaderProps> = ({
+  isNetworkMenuOpen,
+  setIsNetworkMenuOpen,
+  handleTabClick,
+}) => {
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'flex-start'} w={'100%'} gap={'50px'}>
+        <CompanyWebsiteButton />
+        <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+      </HStack>
+      <HStack>
+        <>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+        </>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default DesktopHeader;
diff --git a/src/app/components/header/components/mobile-header.tsx b/src/app/components/header/components/mobile-header.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+
+interface MobileHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+  isActiveTabs: boolean;
+}
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({
+  isNetworkMenuOpen,
+  setIsNetworkMenuOpen,
+  isActiveTabs,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'space-between'} w={'100%'} gap={'0px'}>
+        <CompanyWebsiteButton />
+        <HStack>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+          <Menu>
+            <MenuButton
+              as={IconButton}
+              aria-label="Options"
+              icon={<HamburgerIcon />}
+              height={'40px'}
+              width={'40px'}
+            />
+            <MenuList>
+              <MenuItem onClick={() => navigate('/')}>Points</MenuItem>
+              <MenuItem onClick={() => navigate('/proof-of-reserve')}>Proof of Reserve</MenuItem>
+              {isActiveTabs && (
+                <>
+                  <MenuItem onClick={() => navigate('/mint-withdraw')}>
+                    Mint/Withdraw dlcBTC
+                  </MenuItem>
+                  <MenuItem onClick={() => navigate('/my-vaults')}>My Vaults</MenuItem>
+                </>
+              )}
+            </MenuList>
+          </Menu>
+        </HStack>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default MobileHeader;
diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -1,30 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import { HamburgerIcon } from '@chakra-ui/icons';
-import {
-  HStack,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  VStack,
-  useBreakpointValue,
-} from '@chakra-ui/react';
-import { Account } from '@components/account/account';
-import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
-import { HeaderLayout } from '@components/header/components/header.layout';
-import { NetworkBox } from '@components/network/network';
+import { VStack, useBreakpointValue } from '@chakra-ui/react';
 import { useActiveTabs } from '@hooks/use-active-tabs';
 import { useAccount } from 'wagmi';
 
 import { Banner } from './components/banner';
-import { NavigationTabs } from './components/tabs';
+import DesktopHeader from './components/desktop-header';
+import MobileHeader from './components/mobile-header';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
-  const location = useLocation();
   const { chain, isConnected } = useAccount();
 
   const [showBanner, setShowBanner] = useState<boolean>(false);
@@ -56,54 +42,19 @@ export function Header(): React.JSX.Element {
           }}
         />
       )}
-      <HeaderLayout>
-        <HStack
-          justifyContent={isMobile ? 'space-between' : 'flex-start'}
-          w={'100%'}
-          gap={isMobile ? '0px' : '50px'}
-        >
-          <CompanyWebsiteButton />
-          {isMobile ? (
-            <HStack>
-              <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
-              <Account />
-              <Menu>
-                <MenuButton
-                  as={IconButton}
-                  aria-label="Options"
-                  icon={<HamburgerIcon />}
-                  height={'40px'}
-                  width={'40px'}
-                />
-                <MenuList>
-                  <MenuItem onClick={() => navigate('/')}>Points</MenuItem>
-                  <MenuItem onClick={() => navigate('/proof-of-reserve')}>
-                    Proof of Reserve
-                  </MenuItem>
-                  {isActiveTabs && (
-                    <>
-                      <MenuItem onClick={() => navigate('/mint-withdraw')}>
-                        Mint/Withdraw dlcBTC
-                      </MenuItem>
-                      <MenuItem onClick={() => navigate('/my-vaults')}>My Vaults</MenuItem>
-                    </>
-                  )}
-                </MenuList>
-              </Menu>
-            </HStack>
-          ) : (
-            <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
-          )}
-        </HStack>
-        <HStack>
-          {!isMobile && (
-            <>
-              <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
-              <Account />
-            </>
-          )}
-        </HStack>
-      </HeaderLayout>
+      {isMobile ? (
+        <MobileHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+          isActiveTabs={isActiveTabs}
+        />
+      ) : (
+        <DesktopHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+          handleTabClick={handleTabClick}
+        />
+      )}
     </VStack>
   );
 }