Footer.tsx

import React from "react"
import { Logo, Menu, Socials } from "@onegeo-suite/gatsby-theme-onegeo"
import { graphql, useStaticQuery } from "gatsby"

interface Props {
    className?: string
}

const Footer = (props: Props) => {
    const { className = "" } = props

    const dataDirectus = useStaticQuery(graphql`
        query getLogoFooter {
            directus {
                site {
                    logo {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData(height: 52)
                            }
                            name
                            publicURL
                        }
                    }
                }
            }
        }
    `)

    const logo = dataDirectus.directus.site.logo?.imageFile
    return (
        <footer className={`footer bg-base-300 items-center px-4 ${className}`}>
            <div className="grid-flow-col items-center">
                <Logo title="" image={logo} url="/" />
            </div>
            <div className="justify-self-center">
                <Menu name="footer" className="menu menu-horizontal p-0" />
            </div>
            <div className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
                <div className="m-4 flex gap-2">
                    <Socials layout="row" />
                </div>
            </div>
        </footer>
    )
}

export default Footer