forked from Mirrors/swingmusic-webclient
99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="genres-banner"
|
|
:style="{
|
|
color: color ? getShift(color, [100, -100]) : '',
|
|
}"
|
|
>
|
|
<div class="scrollable">
|
|
<div class="rounded pad-sm genre-pill">
|
|
{{ genres.length ? "Genres" : "No genres" }}
|
|
</div>
|
|
<div
|
|
v-for="genre in genres"
|
|
:key="genre"
|
|
class="genre-pill rounded pad-sm"
|
|
:style="{
|
|
backgroundColor: color,
|
|
}"
|
|
>
|
|
{{ genre }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted } from "vue";
|
|
import useAlbumStore from "@/stores/pages/album";
|
|
import useArtistStore from "@/stores/pages/artist";
|
|
|
|
import { getShift } from "@/utils/colortools/shift";
|
|
|
|
const album = useAlbumStore();
|
|
const store = useArtistStore();
|
|
|
|
const props = defineProps<{
|
|
source: string;
|
|
}>();
|
|
|
|
const genres = computed(() => {
|
|
return props.source === "album" ? album.info.genres : store.genres;
|
|
});
|
|
|
|
const color = computed(() => {
|
|
return props.source === "album" ? album.colors.btn : "";
|
|
});
|
|
|
|
const hookAction = async () => {
|
|
if (props.source === "album") {
|
|
// fetch data to be used in the component below this one.
|
|
await album.fetchArtistAlbums();
|
|
return;
|
|
}
|
|
};
|
|
|
|
onMounted(hookAction);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.genres-banner {
|
|
margin-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
font-size: 0.9rem;
|
|
padding-left: $medium;
|
|
text-transform: capitalize;
|
|
user-select: none;
|
|
overflow: scroll;
|
|
@include hideScrollbars;
|
|
|
|
.scrollable {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: max-content;
|
|
gap: 1rem;
|
|
padding-right: $medium;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.genre-pill {
|
|
background-color: $gray5;
|
|
min-width: 4rem;
|
|
text-align: center;
|
|
padding: $small 1rem;
|
|
font-weight: 700;
|
|
|
|
&:first-child {
|
|
background-color: white;
|
|
color: black;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $pink !important;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|