Refactor components structure

src/components/blog/ListItem.astro

@@ -0,0 +1,54 @@
+---
+import Picture from "~/components/core/Picture.astro";
+import PostTags from "~/components/atoms/Tags.astro";
+
+import { getPermalink } from "~/utils/permalinks";
+import { findImage } from "~/utils/images";
+import { getFormattedDate } from "~/utils/utils";
+
+const { post } = Astro.props;
+
+const image = await findImage(post.image);
+---
+
+<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
+  <a class="relative block group" href="#0">
+    <div
+      class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
+    >
+      <Picture
+        src={image}
+        class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
+        widths={[400, 768]}
+        sizes="(max-width: 767px) 400px, 768px"
+        alt={post.description}
+        aspectRatio={1}
+      />
+    </div>
+  </a>
+  <div>
+    <header>
+      <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
+        <a
+          class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          href={getPermalink(post.slug, "post")}
+        >
+          {post.title}
+        </a>
+      </h2>
+    </header>
+    <p class="text-md sm:text-lg flex-grow">
+      {post.excerpt || post.description}
+    </p>
+    <footer class="mt-4">
+      <div>
+        <span class="text-gray-500 dark:text-slate-400">
+          <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+        </span>
+      </div>
+      <div class="mt-4">
+        <PostTags tags={post.tags} />
+      </div>
+    </footer>
+  </div>
+</article>