index.tsx

import React, { ReactElement } from "react"
import { graphql, PageProps } from "gatsby"

import { Layout, Sections } from "@onegeo-suite/gatsby-theme-onegeo"

interface IData {
    directus: {
        site: {
            sections: {
                sections_id: {
                    id: string
                }
            }[]
            options?: any
        }
    }
}

function Index({ data }: PageProps<IData>): ReactElement {
    const sections = data.directus.site.sections
    const options = data.directus.site.options ?? {}

    const ids = sections.map((section) => section.sections_id.id)
    if (!ids || ids.length == 0) return <Layout>No section !</Layout>

    return (
        <Layout theme={options.theme}>
            <Sections ids={ids} />
        </Layout>
    )
}

export default Index

export const query = graphql`
    query {
        directus {
            site {
                sections(
                    sort: "sort"
                    filter: { sections_id: { status: { _eq: "published" } } }
                ) {
                    sections_id {
                        id
                    }
                    sort
                }
                options
            }
        }
    }
`