refactor: use mobile and desktop components

src/components/Footer/Footer.tsx

@@ -1,20 +1,22 @@
-'use client';
-
-import { DesktopFooter, MobileFooter } from './components';
+import { IPageListItem } from '@/app/[locale]/(main)/layout';
 import { Box } from '@mui/material';
-import { useAppContext } from '@/hooks/useAppContext';
 import { FC } from 'react';
-import { IPageListItem } from '@/app/[locale]/(main)/layout';
+import DesktopView from '../App/DesktopView';
+import MobileView from '../App/MobileView';
+import { DesktopFooter, MobileFooter } from './components';
 
 export interface FooterProps {
   pages: IPageListItem[];
 }
 const Footer: FC<FooterProps> = ({ pages }) => {
-  const { isMobile } = useAppContext();
-
   return (
     <Box mt={2}>
-      {isMobile ? <MobileFooter /> : <DesktopFooter pages={pages} />}
+      <MobileView>
+        <MobileFooter />
+      </MobileView>
+      <DesktopView>
+        <DesktopFooter pages={pages} />
+      </DesktopView>
     </Box>
   );
 };

src/components/Footer/components/DesktopFooter.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { IPageListItem } from '@/app/[locale]/(main)/layout';
 import { Box, Container, Link, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';

src/components/Header/Header.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { AppBar, Container } from '@mui/material';
-import { DesktopView, MobileView } from './components';
 import { Suspense } from 'react';
-import { useAppContext } from '@/hooks/useAppContext';
+import DesktopView from '../App/DesktopView';
+import MobileView from '../App/MobileView';
+import { DesktopHeader } from './components';
 
 const Header = () => {
-  const { isMobile } = useAppContext();
   return (
     <AppBar
       elevation={0}
@@ -21,13 +21,14 @@ const Header = () => {
       }}
     >
       <Container maxWidth="xl">
-        {isMobile ? (
+        <DesktopView>
+          <DesktopHeader />
+        </DesktopView>
+        <MobileView>
           <Suspense>
             <MobileView />
           </Suspense>
-        ) : (
-          <DesktopView />
-        )}
+        </MobileView>
       </Container>
     </AppBar>
   );

src/components/Header/components/DesktopHeader.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Suspense } from 'react';
+import BottomSection from './BottomSection';
+import TopSection from './TopSection';
+
+const DesktopHeader = () => {
+  return (
+    <Suspense>
+      <TopSection />
+      <BottomSection />
+    </Suspense>
+  );
+};
+
+export default DesktopHeader;

src/components/Header/components/MobileView.tsx → src/components/Header/components/MobileHeader.tsx

@@ -7,7 +7,7 @@ import SearchDialog from './SearchDialog';
 import SearchSection from './SearchSection';
 import { useTranslations } from 'next-intl';
 
-const MobileView = () => {
+const MobileHeader = () => {
   const { navigate, q } = useCustomSearchParams();
 
   const [open, setOpen] = useState(false);
@@ -64,4 +64,4 @@ const MobileView = () => {
   );
 };
 
-export default MobileView;
+export default MobileHeader;

src/components/Header/components/index.ts

@@ -1,4 +1,4 @@
-export { default as TopSection } from "./TopSection";
-export { default as BottomSection } from "./BottomSection";
-export { default as DesktopView } from "./DesktopView";
-export { default as MobileView } from "./MobileView";
+export { default as TopSection } from './TopSection';
+export { default as BottomSection } from './BottomSection';
+export { default as DesktopHeader } from './DesktopHeader';
+export { default as MobileHeader } from './MobileHeader';