From d5cf84e592dd1cf3af98d9b5aaaae7e2927df42e Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 22 Jul 2023 02:14:22 +0200
Subject: [PATCH] refactor: move buttons and tags to separate components

---
 src/components/FilteredList.vue | 230 ++++----------------------------
 1 file changed, 27 insertions(+), 203 deletions(-)

diff --git a/src/components/FilteredList.vue b/src/components/FilteredList.vue
index a4d09ca..422aa4f 100644
--- a/src/components/FilteredList.vue
+++ b/src/components/FilteredList.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import type { Kink } from '@/interfaces'
+import FilterButton from '@/components/FilterButton.vue'
+import FilterListTag from '@/components/FilterListTag.vue'
 
 interface Props {
   data: Kink[]
@@ -33,44 +35,43 @@ const toLabel = (rating: number) => {
 <template>
   <div class="filter-list">
     <div class="filter-list__filters">
-      <input type="checkbox" name="rating" id="fave" :value="1" v-model="filterOptions" />
-      <label for="fave" class="filter-list__button love">Love</label>
-
-      <input type="checkbox" name="rating" id="like" :value="2" v-model="filterOptions" />
-      <label for="like" class="filter-list__button yes">Yes</label>
-
-      <input type="checkbox" name="rating" id="maybe" :value="3" v-model="filterOptions" />
-      <label for="maybe" class="filter-list__button maybe">Maybe</label>
-
-      <input type="checkbox" name="rating" id="no" :value="4" v-model="filterOptions" />
-      <label for="no" class="filter-list__button no">No</label>
+      <FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
+        Love
+      </FilterButton>
+      <FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
+        Yes
+      </FilterButton>
+      <FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
+        Maybe
+      </FilterButton>
+      <FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
+        No
+      </FilterButton>
     </div>
 
     <div class="filter-list__list-container">
       <template v-if="filterOptions.length > 0">
         <ul class="filter-list__list">
           <li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
-            <span
+            <FilterListTag
               v-if="filterOptions.length > 1"
-              class="filter-list__tag category"
-              :class="toLabel(item.rating)?.toLowerCase()"
+              class="category"
+              :type="toLabel(item.rating)?.toLowerCase()"
             >
-              <span>
-                {{ toLabel(item.rating) }}
-              </span>
-            </span>
+              <span>{{ toLabel(item.rating) }}</span>
+            </FilterListTag>
+
             <span class="filter-list__item-name">
-              <span>
-                {{ item.name }}
-              </span>
+              <span>{{ item.name }}</span>
             </span>
-            <span class="filter-list__tag receive">
+
+            <FilterListTag type="receive">
               <span v-if="item.receive">receive</span>
-            </span>
-            <span class="filter-list__tag give">
+            </FilterListTag>
+
+            <FilterListTag type="give">
               <span v-if="item.give">give</span>
-            </span>
-            <!-- <span class="filter-list__tag-list"> </span> -->
+            </FilterListTag>
           </li>
         </ul>
       </template>
@@ -105,115 +106,6 @@ const toLabel = (rating: number) => {
 
     border-collapse: collapse;
     padding: 0.5rem 0.75rem;
-
-    input {
-      display: none;
-
-      &: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);
-        }
-      }
-    }
-  }
-
-  &__button {
-    flex: 1 1 0;
-
-    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);
-      }
-    }
   }
 
   &__intro-msg {
@@ -254,73 +146,5 @@ const toLabel = (rating: number) => {
     flex: 1 0 0;
     line-height: 2;
   }
-
-  &__tag-list {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  &__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>