News.tsx

import React from "react";
import { Link } from "gatsby";
import { IGatsbyImageData } from "gatsby-plugin-image";

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

interface INew {
    title?: string;
    content?: string;
    image?: string | IGatsbyImageData;
    to?: string;
}

interface Props {
    title?: string;
    news?: INew[];
    action?: {
        title?: string;
        to?: string;
        classname?: string;
    };
    anime?: boolean;
}


const News = (props: Props) => {
    const {
        title = '',
        news = [],
        anime = true,
        action
    } = props;

    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;