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

src/components/ui/Destinations.astro

@@ -0,0 +1,39 @@
+---
+export interface Props {
+  destinations: string[];
+  class?: string;
+}
+
+const { destinations, class: className = "text-sm" } = Astro.props;
+---
+
+{
+  destinations && Array.isArray(destinations) && (
+    <ul class:list={["flex flex-wrap gap-2", className]}>
+      {destinations.map((destination) => (
+        <li class="inline-block relative">
+          <a
+            href={`/destination/${destination}`}
+            class="inline-flex items-center gap-1 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 px-3 py-1 rounded-full border border-emerald-500/20 transition-colors duration-200"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-3 h-3"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+            {destination}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}