Files
Eurovision-25-frontend/components/ArtistListItem.vue
T

19 lines
787 B
Vue

<script setup lang="ts">
const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
</script>
<template>
<NuxtLink :to="`/review/${artistID}`">
<div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl">
<h2 class="w-1/4 text-center">{{ runningOrder }}</h2>
<div class="flex flex-col w-1/2">
<h2>{{ country }}</h2>
<p class="flex gap-2 text-sm">
<span class="font-bold">{{ artist }}</span>
<span class="italic">{{ title }}</span>
</p>
</div>
<img class="w-1/4" src="https://placehold.co/100" alt="{{ flag }}">
</div>
</NuxtLink>
</template>