layout.tsx

/**
 * Main site Layout
 */
import React from "react"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
import SEO from "./seo"
import Header from "../components/Header"
import Footer from "../components/Footer"
interface Props {
    children: React.ReactNode
    UserMenu?: React.ReactNode
}

/**
 * Default Layout with Header (Helmet & SEO) and Footer
 * @param {Props} props - Page content
 * @returns {JSX.Element} The complete page
 */
const Layout = ({ children }: Props): JSX.Element => {
    const data = useStaticQuery(graphql`
        query {
            directus {
                site {
                    icon {
                        id
                        imageFile {
                            id
                            publicURL
                        }
                    }
                }
            }
        }
    `)

    return (
        <>
            <Helmet>
                <link
                    rel="icon"
                    href={data.directus.site?.icon?.imageFile?.publicURL}
                    type="image/png"
                />
            </Helmet>
            <SEO />
            {/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c */}
            <div className="relative min-h-screen">
                <div className="pb-24">
                    <Header />
                    {children}
                </div>
                <Footer className="absolute bottom-0 h-24" />
            </div>
        </>
    )
}

export default Layout