nx-guitar-school/apps/website/components/home-section-blog-une/home-section-blog-une.tsx

import {format} from "date-fns";
import NextImage from "next/image";
import delve from 'dlv';

import {contentfulImageLoader, getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";

/* eslint-disable-next-line */
export interface HomeSectionBlogUneProps {
  item: object;
}

export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
  const [width, height] = getStrapiImageSize(item);

  return (
    <>
      <div className="rounded-lg overflow-hidden shadow-sm
      bg-white
      dark:bg-gray-800">
        <div className="flex justify-between items-center absolute left-5 top-5">
            <span
              className="font-bold shadow text-white text-sm">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
        </div>
        <div className="flex justify-between items-center absolute right-5 top-5">
          <a href={getCategoryUrl(item)}
             title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
             aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
             className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
            {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
          </a>
        </div>

        {<NextImage
          loader={contentfulImageLoader}
          width={width}
          height={height}
          className="rounded-t-lg"
          src={getStrapiImage(item)}
          alt={delve(item, '0.title', 'N/A')} />}

        <main className="p-5">
          <div className="mt-2">
            <a
              href={getPostUrl(item)}
              title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
              aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
              className="text-xl font-bold hover:underline
                  text-gray-700
                  dark:text-gray-200">
              {delve(item, 'attributes.title', 'N/A')}
            </a>
            <p className="mt-2 font-light text-sm
                text-gray-600
                dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
          </div>

          <div className="flex justify-between items-center mt-4">
            <a href={getPostUrl(item)}
               title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
               aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
               className="text-blue-500 text-sm hover:underline">Lire l'article</a>
            <div>
              <span
                 className="flex items-center">
                <img
                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                  alt="avatar"
                  width="auto"
                  height="auto"
                  className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
                <h3 className="text-normal font-bold hover:underline
                    text-gray-700
                    dark:text-gray-300">Alex John</h3>
              </span>
            </div>
          </div>
        </main>
      </div>
    </>
  );
}

export default HomeSectionBlogUne;