Socials.tsx

import { graphql, useStaticQuery } from "gatsby"
import React from "react"
import Logo from "./core/Logo"
import { twMerge } from "tailwind-merge"

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

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

    const options = props.options ?? {}
    const oClass = options.class || {}

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

export default Socials