personal-website/src/components/blog/Masthead.astro

---
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
import ExperienceTags from "@/components/ExperienceTags.astro";
import FormattedDate from "@/components/FormattedDate.astro";
import TagList from "@/components/TagList.astro";

interface Props {
	content: CollectionEntry<"writing">;
	readingTime: string;
}

const {
	content: { data },
	readingTime,
} = Astro.props;

const dateTimeOptions: Intl.DateTimeFormatOptions = {
	month: "long",
};
---

{
	data.coverImage && (
		<div class="mb-6 aspect-video">
			<Image
				alt={data.coverImage.alt}
				layout="constrained"
				width={748}
				height={420}
				priority
				src={data.coverImage.src}
			/>
		</div>
	)
}
{data.draft ? <span class="text-base text-red-500">(Draft)</span> : null}
<h1 class="title">
	{data.title}
</h1>
<div class="flex flex-wrap items-center gap-x-3 gap-y-2">
	<p class="font-semibold">
		<FormattedDate date={data.publishDate} dateTimeOptions={dateTimeOptions} /> /{" "}
		{readingTime}
	</p>
	{
		data.updatedDate && (
			<span class="bg-quote/5 text-quote rounded-lg px-2 py-1">
				Updated:
				<FormattedDate class="ms-1" date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
			</span>
		)
	}
</div>
{
	!!data.experiences?.length && (
		<div class="mt-3">
			<ExperienceTags experiences={data.experiences} />
		</div>
	)
}
<TagList tags={data.tags} class="mt-3" />