react-components/blog/post-header.tsx
2024-10-30 18:28:41 +01:00

34 lines
982 B
TypeScript

import Avatar from "./avatar";
import CoverImage from "./cover-image";
import DateFormatter from "./date-formatter";
import { PostTitle } from "@/components/blog/post-title";
import { type Author } from "@/interfaces/author";
type Props = {
title: string;
coverImage: string;
date: string;
author: Author;
};
export function 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>
</>
);
}