website-new/frontend/src/components/LatestArticles.jsx

import React from 'react';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import useFetchCollections from './../hooks/useFetchCollections';
import { formatDate } from './../utils/formatDate';

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = ['AuthorImage', 'ArticleImage', 'article_category'];

const LatestArticles = () => {
  const strapi = strapiApiBuilder(
    'articles',
    strapiPopulate,
    '&sort[0]=Date:DESC&pagination[pageSize]=3',
  );

  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);

  return (
    <div className="col-span-1 md:col-span-2 flex flex-col gap-4">
      <h4 className="text-n-subhead font-semibold text-dark-gray mb-8">
        Latest Blog Posts
      </h4>
      {data &&
        data.length > 0 &&
        data.map((element, index) => (
          <a
            key={index}
            className={'card box flex flex-col items-center justify-between gap-[24px]'}
            href={`/articles/${element.attributes.Slug}`}
          >
            <div className="flex flex-col gap-[4px]">
              {element.attributes.AuthorTitle && (
                <div className="flex gap-2">
                  <img
                    className="max-h-[36px] object-fit rounded-full"
                    src={api_url + element.attributes.AuthorImage.data.attributes.url}
                    alt={
                      api_url +
                      element.attributes.AuthorImage.data.attributes.alternativeText
                    }
                  />
                  <div className="flex flex-col items-start">
                    <p className="paragraph">{element.attributes.Author}</p>
                    <p className="text-small-subhead text-gray-400 leading-normal">
                      {element.attributes.AuthorTitle}
                    </p>
                  </div>
                </div>
              )}

              <div className="text-left flex flex-col gap-[8px]">
                <h2 className="n-paragraph-title text-dark-gray leading-normal">
                  {element.attributes.ArticleTitle}
                </h2>
              </div>
            </div>
            <img
              src={api_url + element.attributes.ArticleImage.data.attributes.url}
              alt={
                api_url + element.attributes.ArticleImage.data.attributes.alternativeText
              }
            />
          </a>
        ))}
    </div>
  );
};

export default LatestArticles;