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

/* eslint-disable-next-line */
import NextImage from "next/image";
import delve from 'dlv';

import {getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
import CardBlog from "../card-blog/card-blog";
import {format} from "date-fns";

export interface HomeSectionBlogProps {
  posts: object[];
}

export function HomeSectionBlog({posts = []}: HomeSectionBlogProps) {
  const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
  const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
  const [width, height] = getStrapiImageSize(firstArticle[0]);
  return (
    <>
      <section className="container max-w-6xl relative mx-auto relative flex flex-col md:flex-row mb-10 h-auto">
        <div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
          <div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative
          bg-white border-gray-200
          dark:bg-gray-800 dark:border-gray-800 dark:hover: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(firstArticle[0], '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(firstArticle[0])}
                 className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
                {delve(firstArticle[0], 'attributes.category.data.attributes.name', 'N/A')}
              </a>
            </div>

            <NextImage
              layout="responsive"
              width={width}
              height={height}
              objectFit="contain"
              className="rounded-t"
              src={getStrapiImage(firstArticle[0])}
              alt={delve(firstArticle, '0.title', 'N/A')} />

            <main className="p-5">
              <div className="mt-2">
                <a
                  href={getPostUrl(firstArticle[0])}
                  className="text-xl font-bold hover:underline
                  text-gray-700
                  dark:text-gray-200">
                  {delve(firstArticle[0], 'attributes.title', 'N/A')}
                </a>
                <p className="mt-2 font-light text-sm
                text-gray-600
                dark:text-gray-300">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
              </div>

              <div className="flex justify-between items-center mt-4">
                <a href={getPostUrl(firstArticle[0])}
                   className="text-blue-500 text-sm hover:underline">Lire l'article</a>
                <div>
                  <a href="#"
                     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"
                      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>
                  </a>
                </div>
              </div>
            </main>
          </div>
        </div>
        <div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
          {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}
                                                                         item={item} />))}
        </div>
      </section>
    </>
  );
}

export default HomeSectionBlog;