News.tsx

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

import CardList from "./core/CardList"
import Button from "./core/Button"

interface INews {
    title?: string
    action?: {
        title?: string
        to?: string
        classname?: string
    }
    anime?: boolean
}

const News = (props: INews) => {
    const data = useStaticQuery(graphql`
        query getNews {
            directus {
                news(
                    limit: 3
                    filter: { status: { _eq: "published" } }
                    sort: "-date_published"
                ) {
                    id
                    content
                    title
                    date_published
                    image {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData
                            }
                        }
                    }
                }
            }
        }
    `)

    const { title = "", anime = true, action } = props

    const news = data.directus.news.map((dtNew) => {
        return {
            title: dtNew.title,
            content: dtNew.content,
            image: dtNew.image?.imageFile,
            to: "#",
        }
    })

    return (
        <>
            <h2 className="mt-2 text-3xl font-extrabold tracking-tight sm:text-4xl mb-8">
                {title}
            </h2>
            <CardList cards={news} layout="grid" anime={anime} />
            <div className="flex justify-center mt-8">
                {action && (
                    <Button
                        title={action.title}
                        to={action.to}
                        className={action.classname}
                    />
                )}
            </div>
        </>
    )
}

export default News