feat: add tag component

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/tag/Tag.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import type { Theme } from "@/components/base/tag/interface";
+import { computed } from "vue";
+
+const props = defineProps({
+  theme: {
+    type: String as PropType<Theme>,
+    default: "default",
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const classes = computed(() => {
+  return [`tag-${props.theme}`, { "tag-rounded": props.rounded }];
+});
+</script>
+<template>
+  <div class="tag-wrapper" :class="classes">
+    <div v-if="$slots.leftIcon" class="tag-left-icon">
+      <slot name="leftIcon" />
+    </div>
+    <span class="tag-content">
+      <slot />
+    </span>
+    <div v-if="$slots.rightIcon" class="tag-right-icon">
+      <slot name="rightIcon" />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.tag-wrapper {
+  border-radius: 4px;
+  @apply inline-flex;
+  @apply flex-shrink-0;
+  @apply flex-wrap;
+  @apply box-border;
+  @apply cursor-pointer;
+  @apply text-center;
+  @apply items-center;
+  @apply justify-center;
+  @apply w-auto;
+  @apply align-middle;
+  @apply h-5;
+  @apply text-xs;
+
+  &.tag-default {
+    border: 1px solid #d9d9d9;
+  }
+
+  &.tag-primary {
+    background: #4ccba0;
+    border: 1px solid #4ccba0;
+    @apply text-white;
+  }
+
+  &.tag-secondary {
+    background: #0e1731;
+    border: 1px solid #0e1731;
+    @apply text-white;
+  }
+
+  &.tag-danger {
+    background: #d71d1d;
+    border: 1px solid #d71d1d;
+    @apply text-white;
+  }
+
+  &.tag-rounded {
+    @apply rounded-full;
+  }
+
+  .tag-content {
+    @apply px-1;
+  }
+
+  .tag-left-icon {
+    @apply pl-1;
+  }
+
+  .tag-right-icon {
+    @apply pr-1;
+  }
+}
+</style>

src/components/base/tag/__tests__/Tag.spec.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import { VTag } from "../index";
+
+describe("Tag", () => {
+  it("should render", () => {
+    expect(VTag).toBeDefined();
+  });
+});

src/components/base/tag/index.ts

@@ -0,0 +1 @@
+export { default as VTag } from "./Tag.vue";

src/components/base/tag/interface.ts

@@ -0,0 +1 @@
+export type Theme = "default" | "primary" | "secondary" | "danger";

src/views/ViewComponents.vue

@@ -58,6 +58,18 @@
             </VButton>
             <VButton type="danger" :loading="buttonLoading"> Danger </VButton>
             <VButton type="default" :loading="buttonLoading"> Default </VButton>
+            <VButton size="lg" type="secondary" :loading="buttonLoading"
+              >Large</VButton
+            >
+            <VButton type="secondary" :loading="buttonLoading">
+              Default</VButton
+            >
+            <VButton size="sm" type="secondary" :loading="buttonLoading">
+              sm</VButton
+            >
+            <VButton size="xs" type="secondary" :loading="buttonLoading">
+              xs</VButton
+            >
           </VSpace>
         </div>
         <h2 class="mb-1">Icon:</h2>
@@ -244,6 +256,47 @@
           </VSpace>
         </div>
       </section>
+      <section class="box border-2 rounded p-2 mb-3">
+        <h1 class="text-xl font-bold mb-2">Tag</h1>
+        <h2 class="mb-1">Themes:</h2>
+        <div class="mb-3">
+          <VSpace>
+            <VTag theme="default">Halo</VTag>
+            <VTag theme="primary">Halo</VTag>
+            <VTag theme="secondary">Halo</VTag>
+            <VTag theme="danger">Halo</VTag>
+          </VSpace>
+        </div>
+        <h2 class="mb-1">With Icon:</h2>
+        <div class="mb-3">
+          <VSpace>
+            <VTag theme="default" rounded>
+              <template #leftIcon>
+                <IconSettings />
+              </template>
+              Halo
+            </VTag>
+            <VTag theme="primary" rounded>
+              <template #leftIcon>
+                <IconSettings />
+              </template>
+              Halo
+            </VTag>
+            <VTag theme="secondary">
+              <template #leftIcon>
+                <IconSettings />
+              </template>
+              Halo
+            </VTag>
+            <VTag theme="danger">
+              <template #leftIcon>
+                <IconSettings />
+              </template>
+              Halo
+            </VTag>
+          </VSpace>
+        </div>
+      </section>
     </div>
   </FilledLayout>
 </template>
@@ -258,6 +311,7 @@ import { VTextarea } from "@/components/base/textarea";
 import { VRadio, VRadioGroup } from "@/components/base/radio";
 import { VCheckbox, VCheckboxGroup } from "@/components/base/checkbox";
 import { VSpace } from "@/components/base/space";
+import { VTag } from "@/components/base/tag";
 import { reactive, ref } from "vue";
 import type {
   Align,