Refactor components structure

src/components/atoms/ExtraMetaTags.astro

@@ -0,0 +1,2 @@
+---
+---

src/components/atoms/Fonts.astro

@@ -0,0 +1,7 @@
+---
+---
+
+<!-- Google Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />

src/components/atoms/Logo.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
+  🚀 AstroWind
+</span>

src/components/atoms/Pagination.astro

@@ -0,0 +1,34 @@
+---
+import { Icon } from "astro-icon";
+const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
+---
+
+{
+  (prevUrl || nextUrl) && (
+    <div class="container flex">
+      <div class="flex flex-row mx-auto container justify-between">
+        <a
+          href={prevUrl}
+          class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
+      ${!prevUrl ? "invisible" : ""}`}
+        >
+          <div class="flex flex-row align-middle">
+            <Icon name="tabler:arrow-left" class="w-6 h-6" />
+            <p class="ml-2">{prevText}</p>
+          </div>
+        </a>
+        <a
+          href={nextUrl}
+          class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
+            !nextUrl ? "invisible" : ""
+          }`}
+        >
+          <div class="flex flex-row align-middle">
+            <span class="mr-2">{nextText}</span>
+            <Icon name="tabler:arrow-right" class="w-6 h-6" />
+          </div>
+        </a>
+      </div>
+    </div>
+  )
+}

src/components/atoms/Tags.astro

@@ -0,0 +1,17 @@
+---
+import { getPermalink } from "~/utils/permalinks";
+
+const { tags, class: className = "text-sm" } = Astro.props;
+---
+
+{
+  tags && Array.isArray(tags) && (
+    <ul class={className}>
+      {tags.map((tag) => (
+        <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2">
+          <a href={getPermalink(tag, "tag")}>{tag}</a>
+        </li>
+      ))}
+    </ul>
+  )
+}