42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<template>
|
|
<button
|
|
class="p-1 rounded hover:bg-slate-100 transition-colors duration-300"
|
|
aria-label="Toggle favorite"
|
|
@click.stop="fav.toggle(props.track)"
|
|
>
|
|
<svg
|
|
v-if="fav.isFavorite(props.track.id)"
|
|
class="h-5 w-5 text-amber-400 hover:text-amber-300"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
class="h-5 w-5 text-slate-400"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFavoritesStore } from '~/store/favorites'
|
|
import type { Track } from '~/../types/types'
|
|
|
|
const fav = useFavoritesStore()
|
|
|
|
const props = defineProps<{ track: Track }>()
|
|
</script>
|