import Head from "next/head"; import Script from "next/script"; import { useTheme } from "next-themes"; import classNames from "classnames"; import Header from "../Header/Header"; import Footer from "../Footer/Footer"; import { themeColors } from "../../lib/config"; import type { PropsWithChildren, HTMLAttributes } from "react"; import styles from "./Layout.module.css"; type Props = HTMLAttributes & PropsWithChildren<{ noContainer?: boolean; // pass true to disable default `
` container styles with padding, etc. }>; const Layout = ({ noContainer, className, children, ...rest }: Props) => { const { resolvedTheme } = useTheme(); return ( <> {resolvedTheme && } {/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */} {/* remove the `.loading` class above from body once the page is finished loading */}
{/* passing `noContainer={true}` to Layout allows 100% control of the content area on a per-page basis */} {noContainer ? ( <>{children} ) : (
{children}
)}
); }; export default Layout;