web-portfolio/components/ArticleListItem.tsx

import Link from "next/link"
import type {ArticleItem} from "@/types";

interface Props {
    category: string,
    articles: ArticleItem[]
}

const ArticleItemList = ({category, articles}: Props) => {
    return (
        <>
            <div className={"flex flex-col gap-5"}>
                <h2 className={"font-cormorantGaramond text-4xl"}>{category}</h2>
                <div className={"flex flex-col gap-2.5 font-poppins text-lg"}>
                    {articles.map((article, id) => (
                        <Link href={`/blog/${article.id}`} key={id}
                              className={"hover:text-nord-12 transition duration-250"}>
                            {article.title}
                        </Link>
                    ))}
                </div>
            </div>
        </>
    )
}

export default ArticleItemList