feat: add FilterButton component

src/components/FilterButton.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: number[]
+  id: string
+  name?: string
+  kind: string
+  value: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+
+const checked = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div class="filter-button">
+    <input
+      class="filter-button__input"
+      type="checkbox"
+      :name="name"
+      :id="id"
+      :value="value"
+      v-model="checked"
+    />
+    <label :for="id" class="filter-button__label" :class="[kind]">
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+.filter-button {
+  flex: 1 1 0;
+
+  &__input {
+    display: none;
+  }
+
+  &__input:checked + &__label {
+    top: 0.25rem;
+    box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
+
+    &.love {
+      box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
+    }
+
+    &.yes {
+      box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
+    }
+
+    &.maybe {
+      box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
+    }
+
+    &.no {
+      box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
+    }
+  }
+
+  &__label {
+    display: block;
+
+    position: relative;
+    top: 0;
+
+    background-color: var(--color-button);
+
+    font-weight: 700;
+    text-decoration: none;
+    text-align: center;
+
+    margin: 0.5rem 0;
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+
+    box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
+
+    transition: all 0.1s ease-out;
+
+    &:hover {
+      cursor: pointer;
+      top: -0.25rem;
+      box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
+    }
+
+    &:active {
+      top: 0.25rem;
+      box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
+    }
+
+    &.love {
+      background-color: var(--theme-c-love);
+      box-shadow: 0 0.5rem 0 0 var(--theme-c-love-dark);
+
+      &:hover {
+        box-shadow: 0 0.75rem 0 0 var(--theme-c-love-dark);
+      }
+
+      &:active {
+        box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
+      }
+    }
+
+    &.yes {
+      background-color: var(--theme-c-yes);
+      box-shadow: 0 0.5rem 0 0 var(--theme-c-yes-dark);
+
+      &:hover {
+        box-shadow: 0 0.75rem 0 0 var(--theme-c-yes-dark);
+      }
+
+      &:active {
+        box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
+      }
+    }
+
+    &.maybe {
+      background-color: var(--theme-c-maybe);
+      box-shadow: 0 0.5rem 0 0 var(--theme-c-maybe-dark);
+
+      &:hover {
+        box-shadow: 0 0.75rem 0 0 var(--theme-c-maybe-dark);
+      }
+
+      &:active {
+        box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
+      }
+    }
+
+    &.no {
+      background-color: var(--theme-c-no);
+      box-shadow: 0 0.5rem 0 0 var(--theme-c-no-dark);
+
+      &:hover {
+        box-shadow: 0 0.75rem 0 0 var(--theme-c-no-dark);
+      }
+
+      &:active {
+        box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
+      }
+    }
+  }
+}
+</style>