Refactor components structure

src/components/blog/SinglePost.astro

@@ -0,0 +1,43 @@
+---
+import Picture from "~/components/core/Picture.astro";
+import PostTags from "~/components/atoms/Tags.astro";
+
+import { getFormattedDate } from "~/utils/utils";
+
+const { post } = Astro.props;
+---
+
+<section class="py-8 sm:py-16 lg:py-20 mx-auto">
+  <article>
+    <header>
+      <p class="max-w-3xl mx-auto text-center">
+        <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+      </p>
+      <h1
+        class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
+      >
+        {post.title}
+      </h1>
+      {
+        post.image && (
+          <Picture
+            src={post.image}
+            class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+            widths={[400, 900]}
+            sizes="(max-width: 900px) 400px, 900px"
+            alt={post.description}
+            aspectRatio="16:9"
+          />
+        )
+      }
+    </header>
+    <div
+      class="container mx-auto px-8 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+    >
+      <Fragment set:html={post.body} />
+    </div>
+    <div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
+      <PostTags tags={post.tags} />
+    </div>
+  </article>
+</section>