File size: 1,724 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 |
import { compressImage } from '@/lib/notion/mapImage'
import Link from 'next/link'
import { usePlogGlobal } from '..'
import { isMobile } from '@/lib/utils'
import LazyImage from '@/components/LazyImage'
import NotionIcon from '@/components/NotionIcon'
/**
* 博客照片卡牌
* @param {*} props
* @returns
*/
const BlogPost = (props) => {
const { post, index, siteInfo } = props
const pageThumbnail = compressImage(post?.pageCoverThumbnail || siteInfo?.pageCover)
const { setModalContent, setShowModal } = usePlogGlobal()
const handleClick = () => {
setShowModal(true)
setModalContent(post)
}
// 实现动画 一个接一个出现
let delay = index * 100
if (isMobile()) {
delay = 0
}
return (
<article
onClick={handleClick}
data-aos-delay={`${delay}`}
data-aos="fade-up"
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
key={post?.id} className='cursor-pointer relative'>
<LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
<h2 className="text-md absolute left-0 bottom-0 m-4 text-gray-100 shadow-text">
<NotionIcon icon={post.pageIcon} /> {post?.title}
</h2>
{post?.category && <div className='text-xs rounded-lg absolute left-0 top-0 m-4 px-2 py-1 bg-gray-200 dark:bg-black dark:bg-opacity-25 hover:bg-blue-700 hover:text-white duration-200'>
<Link href={`/category/${post?.category}`}>
{post?.category}
</Link>
</div>}
</article>
)
}
export default BlogPost
|