8783793273
* Replace `blog-starter` JS example with `blog-starter-typescript` * lint-fix, Revert pnpm-lock.yaml * Revert root readme.md * Add useful sections omitted from original Typescript convert Co-authored-by: JJ Kasper <jj@jjsweb.site>
36 lines
971 B
TypeScript
36 lines
971 B
TypeScript
import Avatar from './avatar'
|
|
import DateFormatter from './date-formatter'
|
|
import CoverImage from './cover-image'
|
|
import PostTitle from './post-title'
|
|
import type Author from '../interfaces/author'
|
|
|
|
type Props = {
|
|
title: string
|
|
coverImage: string
|
|
date: string
|
|
author: Author
|
|
}
|
|
|
|
const PostHeader = ({ title, coverImage, date, author }: Props) => {
|
|
return (
|
|
<>
|
|
<PostTitle>{title}</PostTitle>
|
|
<div className="hidden md:block md:mb-12">
|
|
<Avatar name={author.name} picture={author.picture} />
|
|
</div>
|
|
<div className="mb-8 md:mb-16 sm:mx-0">
|
|
<CoverImage title={title} src={coverImage} />
|
|
</div>
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="block md:hidden mb-6">
|
|
<Avatar name={author.name} picture={author.picture} />
|
|
</div>
|
|
<div className="mb-6 text-lg">
|
|
<DateFormatter dateString={date} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PostHeader
|