43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Package } from '@lucide/vue';
|
|
import type { MediaItem } from '@/types/media';
|
|
|
|
withDefaults(defineProps<{
|
|
title: string;
|
|
coverImage?: MediaItem;
|
|
showCover?: boolean;
|
|
}>(), {
|
|
showCover: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<article class="mb-4 break-inside-avoid overflow-hidden rounded-lg border bg-card shadow-sm">
|
|
<div v-if="showCover" class="relative aspect-4/3 overflow-hidden bg-muted/30">
|
|
<img
|
|
v-if="coverImage"
|
|
:src="coverImage.thumb_url"
|
|
:alt="title"
|
|
class="size-full object-cover"
|
|
>
|
|
<div
|
|
v-else
|
|
class="flex size-full items-center justify-center text-muted-foreground"
|
|
>
|
|
<Package class="size-10 opacity-40" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-b bg-muted/20 px-3 py-2.5">
|
|
<h3 class="font-medium leading-tight">
|
|
{{ title }}
|
|
</h3>
|
|
<slot name="header-extra" />
|
|
</div>
|
|
|
|
<div class="divide-y">
|
|
<slot />
|
|
</div>
|
|
</article>
|
|
</template>
|