FEAT: playlist filters

app/components/ui/SelectCardSuit.vue

@@ -0,0 +1,28 @@
+<template>
+  <select v-model="selectedSuit" @change="handleChange"
+    class="px-4 py-2 m-4 text-black font-bold h-12 border-none text-center hover:text-black bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-esyellow-dark focus:border-esyellow-dark cursor-pointer appearance-none">
+    <option value="">♠♣♦♥</option>
+    <option v-for="suit in suits" :key="suit.value" :value="suit.value">
+      {{ suit.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['change'])
+
+const suits = [
+  { value: '♥', label: '♥' },
+  { value: '♦', label: '♦' },
+  { value: '♣', label: '♣' },
+  { value: '♠', label: '♠' }
+]
+
+const selectedSuit = ref('')
+
+const handleChange = () => {
+  emit('change', selectedSuit.value)
+}
+</script>