50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faStar } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
export function MangaCard({ manga }) {
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
navigate(`/manga/${manga.slug}`);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
|
|
onClick={handleClick}
|
|
>
|
|
<div className="relative h-64">
|
|
<img
|
|
src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
|
|
alt={manga.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
|
|
<p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-500">{manga.publicationYear}</span>
|
|
{manga.rating && (
|
|
<span className="flex items-center text-yellow-500">
|
|
<FontAwesomeIcon icon={faStar} className="mr-1" />
|
|
{manga.rating}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{manga.genres.map((genre, index) => (
|
|
<span
|
|
key={index}
|
|
className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
|
|
>
|
|
{genre}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |