mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 20:43:04 +00:00
geoffrey45
50 lines
928 B
Vue
50 lines
928 B
Vue
<template>
|
|
<div class="albums-results border">
|
|
<div class="heading">💿 ALBUMS</div>
|
|
<div class="grid">
|
|
<AlbumCard v-for="album in albums" :key="album" :album="album" />
|
|
</div>
|
|
<LoadMore v-if="more" @loadMore="loadMore" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AlbumCard from "@/components/shared/AlbumCard.vue";
|
|
import LoadMore from "./LoadMore.vue";
|
|
|
|
export default {
|
|
props: ["albums", "more"],
|
|
components: {
|
|
AlbumCard,
|
|
LoadMore,
|
|
},
|
|
setup(props, { emit }) {
|
|
function loadMore() {
|
|
emit("loadMore");
|
|
}
|
|
|
|
return {
|
|
loadMore,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.right-search .albums-results {
|
|
border-radius: 0.5rem;
|
|
background: #0f131b44;
|
|
margin-top: $small;
|
|
padding-bottom: $small;
|
|
padding-top: $small;
|
|
overflow-x: hidden;
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: $small $small 0 $small;
|
|
gap: $small;
|
|
}
|
|
}
|
|
</style>
|