DocsLayout.tsx

import React from 'react';
import styles from './DocsLayout.module.css';
import { Header, HeaderType } from '~/components/_shared/Header';

type DocsLayoutProps = HasChildrenProps;

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <>
      <Header layout={HeaderType.DOCSLAYOUT} />
      <main className={styles.container}>{children}</main>
    </>
  );
};

example.tsx

import React from 'react';
import styles from './Header.module.css';
import { NavigationBar } from '~/components/_shared/NavigationBar';
import Image from 'next/image';

export enum HeaderType {
  LAYOUT = 'LAYOUT',
  DOCSLAYOUT = 'DOCSLAYOUT'
}

type HeaderProps = {
  layout?: HeaderType;
}

export const Header: React.FC<HeaderProps> = ({ layout }) => {
  return (
    <>
      { layout === HeaderType.LAYOUT &&  //default layout header code here }
      { layout === HeaderType.DOCSLAYOUT && // docs layout header code here }
    </>
  );
};

Header.tsx

import React from 'react';
import styles from './Header.module.css';
import { NavigationBar } from '~/components/_shared/NavigationBar';
import Image from 'next/image';

export enum HeaderType {
  LAYOUT = 'LAYOUT',
  DOCSLAYOUT = 'DOCSLAYOUT'
}

type HeaderProps = {
  layout?: HeaderType;
}

export const Header: React.FC<HeaderProps> = ({ layout }) => {
  return (
    <>
      { layout === HeaderType.LAYOUT &&  //default layout header code here }
      { layout === HeaderType.DOCSLAYOUT && // docs layout header code here }
    </>
  );
};

Layout.tsx

import React from 'react';
import styles from './Layout.module.css';
import { Header, HeaderType } from '~/components/_shared/Header';
import { useAuth } from '~/hooks/useAuth';

type LayoutProps = HasChildrenProps;

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  useAuth();

  return (
    <>
      <Header layout={HeaderType.LAYOUT} />
      <main className={styles.container}>{children}</main>
    </>
  );
};