feat: add Destinations component and integrate destination data in blog posts

src/pages/destination/[destination]/[...page].astro

@@ -0,0 +1,64 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+import Headline from "@/components/ui/Headline.astro";
+import PostItem from "@/components/blog/PostItem.astro";
+import Pagination from "@/components/ui/Pagination.astro";
+import type { GetStaticPathsOptions } from "astro";
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+  const allPosts = await getCollection("blog");
+  const posts = allPosts.filter((post) => post.data && post.data.pubDate);
+
+  const destinations = new Set<string>();
+  posts.forEach((post) => {
+    post.data.destination?.forEach((d) => destinations.add(d));
+  });
+
+  return Array.from(destinations).flatMap((destination) => {
+    const destinationPosts = posts
+      .filter((post) => post.data.destination?.includes(destination))
+      .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+    return paginate(destinationPosts, {
+      params: { destination },
+      pageSize: 6,
+    });
+  });
+}
+
+const { page } = Astro.props;
+const { destination } = Astro.params;
+
+const metadata = {
+  title: `Destination: ${destination}`,
+  description: `Travel articles about ${destination}.`,
+};
+---
+
+<BaseLayout metadata={metadata}>
+  <section class="relative px-4 py-8 sm:px-6 lg:px-8 md:py-12">
+    <div class="relative mx-auto max-w-5xl">
+      <Headline
+        tagline="Destination"
+        title={destination}
+        subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
+        classes={{
+          container: "mb-12 text-center",
+          title:
+            "font-heading mb-4 text-4xl font-bold tracking-tight text-foreground md:text-6xl capitalized",
+          subtitle: "mx-auto max-w-3xl text-xl text-muted-foreground",
+        }}
+      />
+
+      <div class="mb-8 text-center">
+        <a href="/blog" class="text-primary hover:underline">← Quay lại blog</a>
+      </div>
+
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {page.data.map((post) => <PostItem post={post} />)}
+      </div>
+      <Pagination page={page} />
+    </div>
+  </section>
+</BaseLayout>