28 lines
1.0 KiB
Vue
28 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink :to="`/review/${artistID}`">
|
|
<div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
|
|
<h2 class="w-1/4 text-center text-slate-300 text-3xl md:text-6xl">{{ runningOrder }}</h2>
|
|
<div class="flex flex-col w-1/2">
|
|
<h2>{{ country }}</h2>
|
|
<p class="flex md:gap-2 text-xs md:text-lg flex-col md:flex-row">
|
|
<span class="font-semibold">{{ artist }}</span>
|
|
<span class="italic">{{ title }}</span>
|
|
</p>
|
|
</div>
|
|
<img :src="`${apiBase}/static/flags/${flag.toLowerCase()}.webp`" class="w-1/4" />
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style>
|
|
.ArtistCard {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
</style>
|
|
|