From f78d956bfd42134b51de2d9365967f154718fa82 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Sun, 11 Sep 2022 03:04:07 +0630
Subject: [PATCH] Create Tag component

---
 src/components/Tag.astro | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/Tag.astro

diff --git a/src/components/Tag.astro b/src/components/Tag.astro
new file mode 100644
index 0000000..cdf8d4c
--- /dev/null
+++ b/src/components/Tag.astro
@@ -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>