Section.tsx

import React from "react"

import { useStaticQuery, graphql } from "gatsby"

import Component from "./section/component"
import Button from "./core/Button"

interface ISection {
    id: string
}

const GRAPHQL_QUERY = graphql`
    query {
        directus {
            sections {
                id
                title
                subtitle
                content
                actions {
                    actions_id {
                        name
                        url
                        style
                        id
                    }
                }
                components {
                    components_id {
                        id
                        title
                        subtitle
                        content
                        url_dataviz
                        url_map
                        type
                        mapdid
                        layout
                        length
                        size
                        actions {
                            actions_id {
                                name
                                url
                                style
                                id
                            }
                        }
                        services {
                            services_id {
                                name
                                url
                                description
                                id
                                image {
                                    imageFile {
                                        publicURL
                                    }
                                    id
                                }
                            }
                        }
                        images {
                            directus_files_id {
                                imageFile {
                                    childImageSharp {
                                        gatsbyImageData
                                    }
                                }
                                id
                            }
                        }
                    }
                }
            }
        }
    }
`

const Section = (props: ISection) => {
    const { id } = props

    const data = useStaticQuery(GRAPHQL_QUERY)

    const section = data.directus.sections.find((section) => section.id === id)
    if (!section) return null

    return (
        <div>
            {section.title && (
                <h1 className="text-3xl font-extrabold">{section.title}</h1>
            )}
            {section.subtitle && (
                <h4 className="text-2xl font-bold mt-2">{section.subtitle}</h4>
            )}
            {section.content && (
                <div
                    className="text-lg leading-8 py-4 text-justify"
                    dangerouslySetInnerHTML={{ __html: section.content }}
                ></div>
            )}
            {section.components.length > 0 && (
                <div
                    className={`grid grid-cols-1 lg:grid-cols-${section.components.length} gap-4`}
                >
                    {section.components.map((component) => {
                        const dtComponent = component.components_id

                        return (
                            <React.Fragment key={dtComponent.id}>
                                <Component {...dtComponent} />
                            </React.Fragment>
                        )
                    })}
                </div>
            )}
            {section.actions.length > 0 && (
                <div className="flex space-x-4 mt-4">
                    {section.actions.map((actionId) => {
                        const action = actionId.actions_id

                        return (
                            <Button
                                key={action.id}
                                {...action}
                                className={action.style}
                            />
                        )
                    })}
                </div>
            )}
        </div>
    )
}

export default Section