first commit

src/components/blog/Languages.astro

@@ -0,0 +1,27 @@
+---
+const allPosts = await Astro.glob("../../pages/blog/posts/*.md");
+const languages = [
+    ...new Set(allPosts.map((post) => post.frontmatter.languages).flat()),
+];
+import Capsule from "../ui/Capsule.astro";
+
+const { variant = "default" } = Astro.props;
+
+const baseClasses = "flex flex-wrap";
+
+const variantClasses = {
+    default: "gap-3 max-lg:gap-1",
+    vertical: "gap-6 flex-col"
+} as const;
+
+const classes = `${baseClasses} ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default}`;
+---
+
+<div class={classes}>
+    {languages.map((language) => (
+        <Capsule lang={language} linkEnabled={true} size="md" />
+    ))}
+</div>
+
+
+