Feature: Layout PostLayout

src/components/post/PostHeader.astro

@@ -47,6 +47,6 @@ const formattedDate = formatDate(pubDate)
 
 <style>
   .post-header {
-    @apply p-3 mb-3 bg-style-primary text-center text-style-primary-inverted;
+    @apply p-4 mb-4 bg-style-primary text-center text-style-primary-inverted;
   }
 </style>

src/layouts/AppLayout.astro

@@ -11,6 +11,7 @@ export interface Props {
   description: string
   author: string
   headerCssClasses?: string
+  keywords?: string[]
 }
 
 const { title, description = '', author, headerCssClasses = '' } = Astro.props

src/layouts/PostLayout.astro

@@ -0,0 +1,40 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+import Breadcrumb from '@/components/Breadcrumb.astro'
+import PostHeader from '@/components/post/PostHeader.astro'
+import siteConfig from '@/configs/site'
+import AppLayout from '@/layouts/AppLayout.astro'
+
+interface Props {
+  frontmatter: CollectionEntry<'leetcode-solutions'>['data']
+}
+
+const { frontmatter } = Astro.props
+const { author } = siteConfig
+---
+
+<AppLayout
+  headerCssClasses="max-w-5xl"
+  title={frontmatter.title}
+  description={frontmatter.title}
+  keywords={[
+    ...((frontmatter.keywords as string[]) || []),
+    ...((frontmatter.tags as string[]) || []),
+  ]}
+  author={author.name}
+>
+  <article class="post">
+    <Breadcrumb items={[{ icon: '', title: frontmatter.title, url: '' }]} />
+    <PostHeader {...frontmatter} />
+    <div class="prose p-4 border max-w-5xl">
+      <slot />
+    </div>
+  </article>
+</AppLayout>
+
+<style lang="css">
+  .post {
+    @apply grid grid-cols-1 mx-auto my-8 p-4 max-w-5xl;
+  }
+</style>