52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import { FrontMatter } from "../types/types";
|
|
|
|
export interface BasicArticleProps extends FrontMatter {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
author: string;
|
|
authorLink: string;
|
|
thumbnail: string;
|
|
}
|
|
export const PostHeader = ({
|
|
frontMatter,
|
|
estTime,
|
|
}: {
|
|
frontMatter: FrontMatter;
|
|
estTime: number;
|
|
}) => {
|
|
const { title, author, date, description, authorLink } =
|
|
frontMatter as BasicArticleProps;
|
|
|
|
return (
|
|
<div className="flex items-start gap-2 flex-col">
|
|
<div className="lg:text-5xl text-3xl font-bold mt-2 text-gray-50">
|
|
{title}
|
|
</div>
|
|
<div className="mt-2 text-gray-600dark:text-gray-400">{description}</div>
|
|
<div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 items-start">
|
|
{author && (
|
|
<div className="font-medium ">
|
|
By{" "}
|
|
{authorLink && (
|
|
<Link href={authorLink} className="dark:text-action text-primary">
|
|
@{author}
|
|
</Link>
|
|
)}
|
|
{!authorLink && (
|
|
<span className="dark:text-action text-primary">@{author}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="text-sm font-medium text-gray-500 lg:before:content-['•'] lg:after:content-['•'] lg:before:pr-2 lg:after:pl-2">
|
|
{date}
|
|
</div>
|
|
<div className="text-sm font-medium text-gray-500">
|
|
{estTime} min read
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|