Create Tag component

2026-08-14 11:29:33 +08:00 · 2022-09-11 03:04:07 +06:30
parent adc725957c
commit f78d956bfd
1 changed files with 39 additions and 0 deletions
@@ -0,0 +1,39 @@
+---
+export interface Props {
+  name: string;
+  size?: "sm" | "lg";
+}
+
+const { name, size = "sm" } = Astro.props;
+
+const slug = ((str: string) =>
+  str
+    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^\w-]+/g, ""))(name);
+---
+
+<li class="inline-block my-1">
+  <a
+    href={`/tags/${slug}`}
+    class={`${size === "sm" ? "py-1 px-2 text-sm" : "p-2 text-lg"}`}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class={`${size === "sm" ? " scale-75" : "scale-125"}`}
+      ><path
+        d="M20 4H8.515a2 2 0 0 0-1.627.838l-4.701 6.581a.997.997 0 0 0 0 1.162l4.701 6.581A2 2 0 0 0 8.515 20H20c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 14H8.515l-4.286-6 4.286-6H20v12z"
+      ></path>
+    </svg>
+    <span>{name}</span>
+  </a>
+</li>
+
+<style>
+  a {
+    @apply bg-skin-card hover:bg-skin-card-muted rounded;
+  }
+  a svg {
+    @apply w-6 h-6 text-skin-base scale-75;
+  }
+</style>