first commit

src/components/ui/Capsule.astro

@@ -0,0 +1,87 @@
+---
+import { Icon } from "astro-icon/components";
+import { getLanguage } from "../../utils/languages";
+
+interface Props {
+  lang: string;
+  size?: "xs" | "md";
+  linkEnabled?: boolean;
+}
+
+const { size = "md", lang, linkEnabled = true } = Astro.props as Props;
+
+const baseClasses = {
+  container: [
+    "flex items-center w-fit",
+    "pl-2 pr-2 py-0.5 gap-1",
+    "text-sm font-semibold leading-3",
+    "bg-white shadow rounded-full",
+    "transition-all duration-300 ease-in-out hover:bg-zinc-800 hover:text-white",
+    "max-sm:pl-1 max-sm:pr-1.5 max-sm:text-xs max-sm:gap-0.5",
+  ].join(" "),
+  iconContainer: [
+    "flex items-center justify-center",
+    "aspect-square",
+    "bg-black rounded-full p-1",
+  ].join(" "),
+};
+
+const sizeClasses = {
+  xs: "size-5",
+  md: "size-7",
+};
+
+const selectedLanguage = getLanguage(lang);
+
+const getContainerClasses = () => {
+  const textSize = selectedLanguage.name.length > 10 ? "text-sm" : "text-base";
+  return `${baseClasses.container} ${textSize}`;
+};
+
+const getIconContainerClasses = () => {
+  return `${baseClasses.iconContainer} ${sizeClasses[size]} max-lg:size-6 max-sm:size-5 ${
+    selectedLanguage.className ? selectedLanguage.className : ""
+  }`;
+};
+---
+
+{
+  linkEnabled ? (
+    <a
+      class="cursor-pointer"
+      href={`/blog/techs/${lang}`}
+      aria-label={`View articles about ${selectedLanguage.name}`}
+      role="link"
+    >
+      <span
+        class={getContainerClasses()}
+        role="presentation"
+        aria-hidden="true"
+      >
+        <div
+          class={getIconContainerClasses()}
+          role="img"
+          aria-label={`${selectedLanguage.name} icon`}
+        >
+          <Icon class="!w-full" name={selectedLanguage.iconName} />
+        </div>
+        {selectedLanguage.name}
+      </span>
+    </a>
+  ) : (
+    <span
+      class={`${getContainerClasses()} cursor-default`}
+      role="presentation"
+      aria-hidden="true"
+    >
+      <div
+        class={getIconContainerClasses()}
+        role="img"
+        aria-label={`${selectedLanguage.name} icon`}
+      >
+        <Icon class="!w-full" name={selectedLanguage.iconName} />
+      </div>
+      {selectedLanguage.name}
+    </span>
+  )
+}