mirror of https://github.com/kremalicious/blog.git
33 lines
820 B
TypeScript
33 lines
820 B
TypeScript
import React from 'react'
|
|
import { Link } from 'gatsby'
|
|
import Image from '../atoms/Image'
|
|
import styles from './PostTeaser.module.scss'
|
|
|
|
export default function PostTeaser({
|
|
post,
|
|
toggleSearch
|
|
}: {
|
|
post: { fields: { slug: string }; frontmatter: { image: any; title: string } }
|
|
toggleSearch?: () => void
|
|
}) {
|
|
const { image, title } = post.frontmatter
|
|
const { slug } = post.fields
|
|
|
|
return (
|
|
<li>
|
|
<Link to={slug} onClick={toggleSearch && toggleSearch}>
|
|
{image ? (
|
|
<>
|
|
<Image fluid={image.childImageSharp.fluid} alt={title} />
|
|
<h4 className={styles.postTitle}>{title}</h4>
|
|
</>
|
|
) : (
|
|
<div className={styles.empty}>
|
|
<h4 className={styles.postTitle}>{title}</h4>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
)
|
|
}
|