28 lines
991 B
Vue
28 lines
991 B
Vue
<template>
|
|
<RouterLink
|
|
:to="{ name: 'manga-details', params: { id: manga.id } }"
|
|
class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
|
|
<div class="relative pb-[130%]">
|
|
<img
|
|
:src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
|
|
:alt="manga.title"
|
|
class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
|
|
</div>
|
|
<div class="p-2">
|
|
<h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1 truncate">{{ manga.title }}</h3>
|
|
<div class="flex items-center">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
|
|
</div>
|
|
</div>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
manga: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
</script>
|