52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
|
|
@click="navigateToDetails"
|
|
>
|
|
<div class="relative pb-[150%]">
|
|
<img
|
|
:src="manga.imageUrl || 'https://via.placeholder.com/300x400'"
|
|
:alt="manga.title"
|
|
class="absolute inset-0 w-full h-full object-contain bg-gray-100"
|
|
/>
|
|
</div>
|
|
<div class="p-2">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
|
|
<div class="flex items-center">
|
|
<span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
|
|
</div>
|
|
<div class="mt-1 text-sm text-gray-500">
|
|
Added: {{ formatDate(manga.createdAt) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
|
|
const props = defineProps({
|
|
manga: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const navigateToDetails = () => {
|
|
router.push({
|
|
name: 'manga-details',
|
|
params: { id: props.manga.id }
|
|
});
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
</script> |