File size: 3,893 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import { siteConfig } from '@/lib/config'
import NotionPage from '@/components/NotionPage'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG from '../config'
import CategoryItem from './CategoryItem'
import TagItemMini from './TagItemMini'
import TwikooCommentCount from '@/components/TwikooCommentCount'
import LazyImage from '@/components/LazyImage'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
import NotionIcon from '@/components/NotionIcon'
const BlogPostCard = ({ post, showSummary }) => {
const showPreview = siteConfig('MEDIUM_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
const { locale } = useGlobal()
const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
return (
<div
key={post.id}
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className="mb-6 max-w-7xl border-b dark:border-gray-800 "
>
<header className="lg:py-8 py-4 flex flex-col w-full">
<Link
href={url}
passHref
className={
'cursor-pointer font-bold hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
}>
<h2>
{siteConfig('MEDIUM_POST_LIST_COVER', null, CONFIG) && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
<LazyImage src={post.pageCoverThumbnail} style={post.pageCoverThumbnail ? {} : { height: '0px' }} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
</div>}
<NotionIcon icon={post.pageIcon} />{post.title}
</h2>
</Link>
<div
className={
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
}
>
<div className="text-sm py-1">{post.date?.start_date}</div>
{siteConfig('MEDIUM_POST_LIST_CATEGORY', null, CONFIG) && <CategoryItem category={post.category} />}
{siteConfig('MEDIUM_POST_LIST_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
<TwikooCommentCount post={post} className='hover:underline'/>
</div>
<div className="flex"></div>
{(!showPreview || showSummary) && (
<main className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</main>
)}
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
<div className="pointer-events-none border-t pt-8 border-dashed">
<div className="w-full justify-start flex">
<Link
href={url}
passHref
className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className="ml-1 fas fa-angle-right" />
</Link>
</div>
</div>
</div>
)}
</header>
</div>
)
}
export default BlogPostCard
|