koel/resources/assets/js/components/podcast/PodcastCard.vue
2024-07-06 17:45:10 +02:00

32 lines
1,001 B
Vue

<template>
<BaseCard
:entity="podcast"
:layout="layout"
:title="`${podcast.title} by ${podcast.author}`"
@click="goToPodcast"
class="cursor-pointer"
>
<template #name>
<a :href="`#/podcasts/${podcast.id}`" class="font-medium" data-testid="title">{{ podcast.title }}</a>
<span class="text-k-text-secondary">{{ podcast.author }}</span>
</template>
<template #thumbnail>
<img :src="podcast.image" class="aspect-square w-[80px] object-cover rounded-lg" alt="Podcast image" />
</template>
</BaseCard>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
import { useRouter } from '@/composables'
import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
const props = withDefaults(defineProps<{ podcast: Podcast, layout?: ArtistAlbumCardLayout }>(), { layout: 'full' })
const { podcast, layout } = toRefs(props)
const { go } = useRouter()
const goToPodcast = () => go(`/podcasts/${podcast.value.id}`)
</script>