NotionNext/themes/hexo/components/BlogPostCard.js

import BLOG from '@/blog.config'
import Link from 'next/link'
import React from 'react'
import {
  Code,
  Collection,
  CollectionRow,
  Equation,
  NotionRenderer
} from 'react-notion-x'
import TagItemMini from './TagItemMini'
import CONFIG_HEXO from '../config_hexo'

const BlogPostCard = ({ post, showSummary }) => {
  const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
  return (
    <div className="w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
      <div
        key={post.id}
        className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"
      >
        <div className="lg:p-8 p-4 flex flex-col w-full">
          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
            <a
              className={`replace cursor-pointer hover:underline text-2xl font-sans ${
                showPreview ? 'text-center' : ''
              } leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}
            >
              {post.title}
            </a>
          </Link>

          <div
            className={`flex mt-2 items-center ${
              showPreview ? 'justify-center' : 'justify-start'
            } flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
          >
            <Link
              href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
              passHref
            >
              <a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
                <i className="far fa-calendar-alt mr-1" />
                {post.date.start_date}
              </a>
            </Link>
          </div>

          {(!showPreview || showSummary) && (
            <p className="replace my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
              {post.summary}
            </p>
          )}

          {showPreview && (
            <div className="overflow-ellipsis truncate">
              <NotionRenderer
                bodyClassName="max-h-full"
                recordMap={post.blockMap}
                mapPageUrl={mapPageUrl}
                components={{
                  equation: Equation,
                  code: Code,
                  collectionRow: CollectionRow,
                  collection: Collection
                }}
              />
            </div>
          )}

          <div className="text-gray-400 justify-between flex">
            <Link href={`/category/${post.category}`} passHref>
              <a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
                <i className="mr-1 far fa-folder" />
                {post.category}
              </a>
            </Link>
            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
              <div>
                {' '}
                {post.tagItems.map(tag => (
                  <TagItemMini key={tag.name} tag={tag} />
                ))}
              </div>
            </div>
          </div>
        </div>

        {CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
            <div className="flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={post?.page_cover}
                alt={post.title}
                className="hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
              />
              {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
            </div>
          </Link>
        )}
      </div>
    </div>
  )
}

const mapPageUrl = id => {
  return 'https://www.notion.so/' + id.replace(/-/g, '')
}

export default BlogPostCard