supabase/www/components/Blog/BlogListItem.tsx

import authors from 'lib/authors.json'
import Image from 'next/image'
import React from 'react'
import Author from '~/types/author'
import PostTypes from '~/types/post'

interface Props {
  post: PostTypes
}

const BlogListItem = ({ post }: Props) => {
  const authorArray: string[] | undefined = post.author ? post.author.split(',') : []
  const author = []

  if (authorArray) {
    for (let i = 0; i < authorArray.length; i++) {
      author.push(
        authors.find((authors: Author) => {
          return authors.author_id === authorArray[i]
        })
      )
    }
  }

  return (
    <div>
      <a href={`/blog/${post.url}`}>
        <div className="inline-block min-w-full group">
          <div className="flex flex-col space-y-6">
            <div className="flex flex-col space-y-3">
              <div
                className={`relative overflow-auto w-full h-60 border border-scale-300 shadow-sm rounded-lg mb-4`}
              >
                <Image
                  layout="fill"
                  src={
                    !post.thumb
                      ? `/images/blog/blog-placeholder.png`
                      : post.type === 'casestudy'
                      ? post.thumb
                      : `/images/blog/${post.thumb}`
                  }
                  objectFit="cover"
                  className="duration-100 ease-in transform scale-100 group-hover:scale-105"
                />
              </div>

              <h3 className="max-w-sm text-xl text-scale-1200">{post.title}</h3>
              {post.date && <p className="text-xs text-scale-1100">{post.date}</p>}
              <p className="max-w-sm text-base text-scale-1100">{post.description}</p>
            </div>
            <div className="flex items-center -space-x-2">
              {author.map((author: any) => {
                return (
                  <div className="w-10 rounded-full ring-2 ring-white dark:ring-scale-200">
                    {author.author_image_url && (
                      <Image
                        src={author.author_image_url}
                        className="rounded-full border dark:border-dark"
                        width="100%"
                        height="100%"
                        layout="responsive"
                      />
                    )}
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </a>
    </div>
  )
}

export default BlogListItem