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;