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

src/pages/[...slug].astro

@@ -3,6 +3,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import Schema from "@/components/seo/Schema.astro";
 import Tags from "@/components/ui/Tags.astro";
 import Categories from "@/components/ui/Categories.astro";
+import Destinations from "@/components/ui/Destinations.astro";
 import { toR2Url } from "@/utils/r2";
 import Picture from "@/components/ui/Picture.astro";
 
@@ -18,8 +19,16 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await render(post);
-const { title, description, pubDate, author, image, categories, tags } =
-  post.data;
+const {
+  title,
+  description,
+  pubDate,
+  author,
+  image,
+  categories,
+  tags,
+  destination,
+} = post.data;
 const coverImage = toR2Url(image);
 
 const formattedDate = pubDate.toLocaleDateString("vi-VN", {
@@ -70,6 +79,13 @@ const metadata = {
         >
           {title}
         </h1>
+        {
+          destination && destination.length > 0 && (
+            <div class="flex flex-wrap justify-center gap-2 mt-4">
+              <Destinations destinations={destination} />
+            </div>
+          )
+        }
       </div>
 
       {