61 lines
2.5 KiB
Vue
61 lines
2.5 KiB
Vue
<template>
|
|
<div class="group relative bg-white dark:bg-gray-800 overflow-hidden shadow-sm">
|
|
<!-- Cover avec overlay -->
|
|
<div class="relative pb-[140%]">
|
|
<RouterLink
|
|
:to="{ name: 'manga-details', params: { id: manga.id } }"
|
|
class="absolute inset-0">
|
|
<img
|
|
:src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
|
|
:alt="manga.title"
|
|
class="w-full h-full object-cover bg-gray-100" />
|
|
</RouterLink>
|
|
|
|
<!-- Gradient + actions au survol -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
|
<div class="absolute bottom-2 left-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
|
|
title="Éditer"
|
|
@click="$emit('edit', manga)">
|
|
<PencilIcon class="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
|
|
title="Sources préférées"
|
|
@click="$emit('sources', manga)">
|
|
<Cog6ToothIcon class="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
|
|
title="Rafraîchir"
|
|
@click="$emit('refresh', manga)">
|
|
<ArrowPathIcon class="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Titre + année -->
|
|
<RouterLink
|
|
:to="{ name: 'manga-details', params: { id: manga.id } }"
|
|
class="block p-2">
|
|
<h3 class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
|
|
<span v-if="manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
|
|
</RouterLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowPathIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
defineProps({
|
|
manga: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
defineEmits(['edit', 'sources', 'refresh']);
|
|
</script>
|