42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<template>
|
|
<header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
|
|
<div class="flex items-start gap-3 sm:items-center">
|
|
<img
|
|
v-if="thumbnailUrl"
|
|
:src="thumbnailUrl"
|
|
class="h-10 w-10 shrink-0 rounded border border-border object-cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<span
|
|
v-else-if="fileName"
|
|
class="h-10 w-10 shrink-0 rounded border border-border bg-muted/60"
|
|
aria-hidden="true"
|
|
/>
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="text-sm font-medium text-card-foreground">{{ title }}</h2>
|
|
<p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type PropType } from 'vue';
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
fileName: {
|
|
type: String as PropType<string | null>,
|
|
default: null
|
|
},
|
|
thumbnailUrl: {
|
|
type: String as PropType<string | null>,
|
|
default: null
|
|
}
|
|
});
|
|
</script>
|