Added sound on hover/focus

src/components/YrhButton.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { useSound } from '@vueuse/sound'
 import { computed } from 'vue'
 
+import buttonSfx from '@/assets/sounds/btn-hover.mp3'
+
+const { play, stop } = useSound(buttonSfx)
+
 const props = defineProps<{
   href?: string
   target?: string
@@ -26,6 +31,9 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     v-bind="attributes"
     class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
     :class="{ active: isActive }"
+    @focus="play"
+    @mouseover="play"
+    @mouseleave="stop"
   >
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />