Partners.tsx

import React from "react"
import { graphql, useStaticQuery } from "gatsby"

import { Carousel } from "@onegeo/gatsby-theme-onegeo"

interface Props {
    className?: string
    delay?: number
}

const Partners = (props: Props) => {
    const { className = "", delay = 2000 } = props

    const dataDirectus = useStaticQuery(graphql`
        query myQuery {
            directus {
                partners {
                    id
                    logo {
                        id
                    }
                    name
                    url
                }
            }
        }
    `)

    const partners = dataDirectus.directus.partners
    const dataImage = partners.map((partner: any) => {
        return { src: `${process.env.DIRECTUS_URL}assets/${partner.logo.id}` }
    })

    return (
        <div className={`${className}`}>
            <Carousel images={dataImage} isLogo={true} delay={delay} />
        </div>
    )
}

export default Partners