fix: approach

pages/_app.tsx

@@ -1,10 +1,26 @@
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { Layout } from "@components";
+import {
+  footerBodySection,
+  footerBottomSection,
+  footerPartnerSection,
+  footerTopSection,
+  headerBody,
+  headerNav,
+} from "@config";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Layout>
+    <Layout
+      headerProps={{ bodySection: headerBody, navSection: headerNav }}
+      footerProps={{
+        bodySection: footerBodySection,
+        bottomSection: footerBottomSection,
+        partnerSection: footerPartnerSection,
+        topSection: footerTopSection,
+      }}
+    >
       <Component {...pageProps} />
     </Layout>
   );

src/components/layout.tsx

@@ -1,29 +1,21 @@
 import { Footer, Header } from "@components";
-import {
-  footerBodySection,
-  footerBottomSection,
-  footerPartnerSection,
-  footerTopSection,
-  headerBody,
-  headerNav,
-} from "@config";
+
 import { Container } from "@dataesr/react-dsfr";
+import { FooterProps } from "./footer/type";
+import { HeaderProps } from "./header/type";
 
 type Props = {
   children: React.ReactNode;
+  headerProps: HeaderProps;
+  footerProps: FooterProps;
 };
 
 const Index = (props: Props): JSX.Element => {
   return (
     <>
-      <Header bodySection={headerBody} navSection={headerNav} />
+      <Header {...props.headerProps} />
       <Container>{props.children}</Container>
-      <Footer
-        topSection={footerTopSection}
-        bodySection={footerBodySection}
-        partnerSection={footerPartnerSection}
-        bottomSection={footerBottomSection}
-      />
+      <Footer {...props.footerProps} />
     </>
   );
 };