2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2019-11-24 14:29:25 +01:00
|
|
|
import { Link, graphql } from 'gatsby'
|
|
|
|
import { Image } from '../atoms/Image'
|
2020-07-19 13:31:27 +02:00
|
|
|
import PostTitle from '../templates/Post/Title'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './PostTeaser.module.css'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
2019-11-24 14:29:25 +01:00
|
|
|
export const postTeaserQuery = graphql`
|
|
|
|
fragment PostTeaser on MarkdownRemark {
|
|
|
|
id
|
|
|
|
fileAbsolutePath
|
|
|
|
frontmatter {
|
|
|
|
title
|
2020-07-19 13:31:27 +02:00
|
|
|
linkurl
|
2021-02-28 02:21:28 +01:00
|
|
|
updated
|
2019-11-24 14:29:25 +01:00
|
|
|
image {
|
|
|
|
childImageSharp {
|
|
|
|
...ImageFluidThumb
|
|
|
|
}
|
|
|
|
}
|
2020-07-19 13:31:27 +02:00
|
|
|
tags
|
2019-11-24 14:29:25 +01:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
slug
|
2021-02-28 02:21:28 +01:00
|
|
|
date
|
2021-02-28 04:50:05 +01:00
|
|
|
type
|
2019-11-24 14:29:25 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
export default function PostTeaser({
|
|
|
|
post,
|
2021-02-28 04:09:56 +01:00
|
|
|
toggleSearch,
|
|
|
|
hideDate
|
2019-10-02 13:35:50 +02:00
|
|
|
}: {
|
2022-11-11 03:31:54 +01:00
|
|
|
post: Queries.PostTeaserFragment
|
2019-10-02 13:35:50 +02:00
|
|
|
toggleSearch?: () => void
|
2021-02-28 04:09:56 +01:00
|
|
|
hideDate?: boolean
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2021-02-28 04:50:05 +01:00
|
|
|
const { image, title, updated } = post.frontmatter
|
2021-03-01 00:36:51 +01:00
|
|
|
const { slug, date } = post.fields
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
return (
|
2019-11-08 20:47:23 +01:00
|
|
|
<Link
|
2022-11-11 03:31:54 +01:00
|
|
|
className={styles.post}
|
2019-11-08 20:47:23 +01:00
|
|
|
to={slug}
|
|
|
|
onClick={toggleSearch && toggleSearch}
|
|
|
|
>
|
2021-02-28 02:21:28 +01:00
|
|
|
{image ? (
|
2021-03-13 04:11:44 +01:00
|
|
|
<Image
|
|
|
|
image={(image as any).childImageSharp.gatsbyImageData}
|
|
|
|
alt={title}
|
|
|
|
/>
|
2021-02-28 02:21:28 +01:00
|
|
|
) : (
|
2022-11-11 03:31:54 +01:00
|
|
|
<span className={styles.empty} />
|
2019-11-08 20:47:23 +01:00
|
|
|
)}
|
2020-07-19 13:31:27 +02:00
|
|
|
|
2021-03-01 02:08:38 +01:00
|
|
|
<PostTitle
|
|
|
|
title={title}
|
|
|
|
date={hideDate ? null : date}
|
|
|
|
updated={updated}
|
2022-11-11 03:31:54 +01:00
|
|
|
className={styles.title}
|
2021-03-01 02:08:38 +01:00
|
|
|
/>
|
2019-11-08 20:47:23 +01:00
|
|
|
</Link>
|
2019-10-02 13:35:50 +02:00
|
|
|
)
|
|
|
|
}
|