48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { formatMessage } from '../lib/messages'
|
|
import type { TrackEvent } from '../lib/types'
|
|
import TrackCard from './TrackCard.vue'
|
|
|
|
const props = defineProps<{ tracks: TrackEvent[] }>()
|
|
const regionLabel = computed(() =>
|
|
formatMessage(
|
|
props.tracks.length === 1
|
|
? 'resultSetRecommendedTrackLabel'
|
|
: 'resultSetRecommendedTracksLabel',
|
|
{ count: props.tracks.length },
|
|
),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="set" role="region" :aria-label="regionLabel" tabindex="0">
|
|
<TrackCard
|
|
v-for="(event, index) in tracks"
|
|
:key="event.track.id"
|
|
:event="event"
|
|
:style="`--card-order: ${index}`"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.set {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
max-height: min(42dvh, 480px);
|
|
padding: var(--s-2) var(--s-3) var(--s-2) 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior-y: contain;
|
|
border-block: 1px solid var(--c-line);
|
|
scrollbar-color: var(--c-line-strong) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.set {
|
|
max-height: min(34dvh, 360px);
|
|
}
|
|
}
|
|
</style>
|