56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<template>
|
|
<Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted" :class="selected && 'bg-muted'">
|
|
<div class="text-[2rem] h-full">
|
|
<Draggable />
|
|
</div>
|
|
<Separator orientation="vertical" />
|
|
<div class="w-fit flex-1 flex flex-col justify-between">
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-between w-full">
|
|
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
|
|
{{ title }}
|
|
</h4>
|
|
<p class="leading-7" 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" />
|
|
<div class="max-w-20 max-h-20 w-20 h-20" v-if="imageUrl">
|
|
<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
|
|
selected?: boolean
|
|
badges?: string[]
|
|
imageUrl?: string
|
|
date?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
authorLabel: 'Author',
|
|
badges: () => []
|
|
})
|
|
</script>
|