mirror of https://github.com/kremalicious/blog.git
66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { Link, graphql } from 'gatsby'
|
|
import { Image } from '../atoms/Image'
|
|
import PostTitle from '../templates/Post/Title'
|
|
import * as styles from './PostTeaser.module.css'
|
|
|
|
export const postTeaserQuery = graphql`
|
|
fragment PostTeaser on MarkdownRemark {
|
|
id
|
|
fileAbsolutePath
|
|
frontmatter {
|
|
title
|
|
linkurl
|
|
updated
|
|
image {
|
|
childImageSharp {
|
|
...ImageFluidThumb
|
|
}
|
|
}
|
|
tags
|
|
}
|
|
fields {
|
|
slug
|
|
date
|
|
type
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function PostTeaser({
|
|
post,
|
|
toggleSearch,
|
|
hideDate
|
|
}: {
|
|
post: Queries.PostTeaserFragment
|
|
toggleSearch?: () => void
|
|
hideDate?: boolean
|
|
}): ReactElement {
|
|
const { image, title, updated } = post.frontmatter
|
|
const { slug, date } = post.fields
|
|
|
|
return (
|
|
<Link
|
|
className={styles.post}
|
|
to={slug}
|
|
onClick={toggleSearch && toggleSearch}
|
|
>
|
|
{image ? (
|
|
<Image
|
|
image={(image as any).childImageSharp.gatsbyImageData}
|
|
alt={title}
|
|
/>
|
|
) : (
|
|
<span className={styles.empty} />
|
|
)}
|
|
|
|
<PostTitle
|
|
title={title}
|
|
date={hideDate ? null : date}
|
|
updated={updated}
|
|
className={styles.title}
|
|
/>
|
|
</Link>
|
|
)
|
|
}
|