---
import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props;
---
<BaseLayout>
<div class="py-12 max-w-4xl mx-auto px-4">
<div class="mb-8">
<a
href="/blog"
class="text-blue-600 dark:text-blue-400 hover:underline mb-4 inline-block"
>
← Back to all posts
</a>
<h1
class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mt-4 mb-2"
>
{frontmatter.title}
</h1>
{
frontmatter.date && (
<p class="text-gray-500 dark:text-gray-400 mb-4">
{new Date(frontmatter.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
)
}
{
frontmatter.author && (
<p class="text-gray-600 dark:text-gray-300 mb-4">
By {frontmatter.author}
</p>
)
}
{
frontmatter.description && (
<p class="text-xl text-gray-600 dark:text-gray-300 mb-6 font-medium">
{frontmatter.description}
</p>
)
}
</div>
<div class="prose prose-lg max-w-none dark:prose-invert">
<slot />
</div>
</div>
</BaseLayout>
