64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
|
<Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted">
|
|
<div class="text-[2rem] h-full">
|
|
<Draggable />
|
|
</div>
|
|
<Separator orientation="vertical" />
|
|
<div class="w-fit flex-1 flex flex-col justify-between cursor-pointer" data-no-drag @click="onPlayClick">
|
|
<div class="w-full">
|
|
<div class="flex items-start justify-between w-full">
|
|
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
|
|
{{ title }}
|
|
</h4>
|
|
<p class="max-w-[16ch]" v-if="date">
|
|
{{ date }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ author }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1" v-if="badges && badges.length > 0">
|
|
<Badge v-for="(badge, index) in badges" :key="index">
|
|
{{ badge }}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<Separator orientation="vertical" class="cursor-pointer" data-no-drag @click="onPlayClick" />
|
|
<div class="max-w-20 max-h-20 w-20 h-20 cursor-pointer" data-no-drag v-if="imageUrl" @click="onPlayClick">
|
|
<NuxtImg class="object-cover w-full h-full rounded-md" :src="imageUrl" :alt="title" />
|
|
</div>
|
|
</Frame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import Draggable from '@/components/icon/Draggable.vue'
|
|
import Frame from '@/components/ui/frame/Frame.vue'
|
|
|
|
interface Props {
|
|
title: string
|
|
author: string
|
|
badges?: string[]
|
|
imageUrl?: string
|
|
date?: string
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
onPlay: []
|
|
}>();
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
authorLabel: 'Author',
|
|
badges: () => []
|
|
})
|
|
|
|
function onPlayClick(e: MouseEvent) {
|
|
emit("onPlay")
|
|
e.stopPropagation();
|
|
}
|
|
</script>
|