From cd9c1d950d3241c82af3079e34a947e93474f43e Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 22 Jul 2023 02:12:52 +0200
Subject: [PATCH] feat: add FilterListTag component

---
 src/components/FilterListTag.vue | 77 ++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/FilterListTag.vue

diff --git a/src/components/FilterListTag.vue b/src/components/FilterListTag.vue
new file mode 100644
index 0000000..e753be3
--- /dev/null
+++ b/src/components/FilterListTag.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+interface Props {
+  type?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <span class="filter-list__tag" :class="type">
+    <slot></slot>
+  </span>
+</template>
+
+<style lang="scss">
+.filter-list {
+  &__tag {
+    flex: 0 0 0;
+
+    span {
+      display: block;
+
+      font-size: 0.75rem;
+      font-weight: bold;
+      text-align: center;
+
+      background: rgba(#f5f5f5, 0.7);
+
+      border: 1px solid #f5f5f5;
+      border-radius: 1em;
+      padding: 0 0.5em;
+    }
+
+    &.love span {
+      background: var(--theme-c-love);
+      border: 1px solid var(--theme-c-love-dark);
+    }
+
+    &.yes span {
+      background: var(--theme-c-yes);
+      border: 1px solid var(--theme-c-yes-dark);
+    }
+
+    &.maybe span {
+      background: var(--theme-c-maybe);
+      border: 1px solid var(--theme-c-maybe-dark);
+    }
+
+    &.no span {
+      background: var(--theme-c-no);
+      border: 1px solid var(--theme-c-no-dark);
+    }
+
+    &.category {
+      flex: 0 0 3rem;
+    }
+
+    &.receive {
+      flex: 0 0 3.125rem;
+
+      span {
+        background: var(--theme-c-receive);
+        border: 1px solid var(--theme-c-receive);
+      }
+    }
+
+    &.give {
+      flex: 0 0 2.125rem;
+
+      span {
+        background: var(--theme-c-give);
+        border: 1px solid var(--theme-c-give);
+      }
+    }
+  }
+}
+</style>