43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export function MangaCard({ manga }) {
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
navigate(`/manga/${manga.slug}`);
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
|
|
onClick={handleClick}
|
|
>
|
|
<div className="relative pb-[150%]">
|
|
<img
|
|
src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
|
|
alt={manga.title}
|
|
className="absolute inset-0 w-full h-full object-contain bg-gray-100"
|
|
/>
|
|
</div>
|
|
<div className="p-2">
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-1">{manga.title}</h3>
|
|
<div className="flex items-center">
|
|
<span className="text-sm text-gray-500">{manga.publicationYear}</span>
|
|
</div>
|
|
<div className="mt-1 text-sm text-gray-500">
|
|
Added: {formatDate(manga.createdAt)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |