Socials.tsx

import { graphql, useStaticQuery } from "gatsby"
import React from "react"
import Logo from "./core/Logo"

interface ISocials {
    layout?: string
    name: string
    logo: any
    url: string
}

const Socials = (props: ISocials) => {
    const dataDirectus = useStaticQuery(graphql`
        query getSocials {
            directus {
                socials(
                    filter: { status: { _eq: "published" } }
                    sort: "sort"
                ) {
                    name
                    url
                    id
                    logo {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData
                            }
                            name
                            publicURL
                        }
                    }
                    sort
                }
            }
        }
    `)

    const dataSocials = dataDirectus.directus.socials

    const { layout } = props

    return (
        <div className={`flex ${layout == "col" ? "w-8 flex-col" : ""} gap-2`}>
            {dataSocials.map((item: any, key: number) => {
                return (
                    <div
                        className={`tooltip ${
                            layout == "row" ? "tooltip-top" : "tooltip-right"
                        } `}
                        data-tip={item.name}
                        key={key}
                    >
                        <Logo
                            image={item.logo?.imageFile}
                            url={item.url}
                            className={"h-7 w-7"}
                        />
                    </div>
                )
            })}
        </div>
    )
}

export default Socials