socials.tsx

import React, { ReactElement } from "react"
import { Socials,Link, Content } from "@onegeo/gatsby-theme-onegeo"
import { graphql, PageProps } from "gatsby"

type Logo = {
    id: string
}

type Data = {
    directus: {
        partners: [id: string, name: string, logo: Logo]
    }
}

const socials = ({ data }: PageProps<Data>): ReactElement => {
    const dataList = data.directus.partners

    return (
        <Content>
            <div className="prose">
                <Link to="/doc">Retour</Link>

                <h1>List resaux sociaux</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
              interface ISocials {
                logo?: any,
                name?: string,
                url?: string,
                layout?:string
              }


            query {
              directus {
                partners(filter: {type: {_eq: "sociaux"}}) {
                  id
                  name
                  url
                  type
                  logo {
                    id
                  }
                }
              }
            }
              `}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <h2>reseaux sociaux</h2>
            <div className="flex gap-2 m-4">
                {dataList.map((item: any) => {
                    return (
                        <div key={item.id}>
                            <Socials
                                name={item.name}
                                url={item.url}
                                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
                                layout="row"
                            />
                        </div>
                    )
                })}
            </div>

            <h2>reseaux sociaux</h2>
            <div className="flex flex-col gap-2 m-4">
                {dataList.map((item: any) => {
                    return (
                        <div key={item.id}>
                            <Socials
                                name={item.name}
                                url={item.url}
                                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
                                layout="col"
                            />
                        </div>
                    )
                })}
            </div>
            {/* <div className="flex gap-6 m-4">
        <Socials dataList={dataList} layout="col" />
      </div> */}
        </Content>
    )
}

export default socials

export const query = graphql`
    query {
        directus {
            partners {
                id
                name
                url
                logo {
                    id
                }
            }
        }
    }
`