49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import type { Series } from '@/types/nostr'
|
|
|
|
interface SeriesCardProps {
|
|
series: Series
|
|
onSelect: (seriesId: string | undefined) => void
|
|
selected?: boolean
|
|
}
|
|
|
|
export function SeriesCard({ series, onSelect, selected }: SeriesCardProps) {
|
|
return (
|
|
<div
|
|
className={`border rounded-lg p-4 bg-white shadow-sm ${
|
|
selected ? 'border-blue-500 ring-1 ring-blue-200' : 'border-gray-200'
|
|
}`}
|
|
>
|
|
{series.coverUrl && (
|
|
<div className="relative w-full h-40 mb-3">
|
|
<Image
|
|
src={series.coverUrl}
|
|
alt={series.title}
|
|
className="object-cover rounded"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-semibold">{series.title}</h3>
|
|
<p className="text-sm text-gray-700 line-clamp-3">{series.description}</p>
|
|
<div className="mt-3 flex items-center justify-between text-sm text-gray-600">
|
|
<span>{series.category === 'science-fiction' ? 'Science-fiction' : 'Recherche scientifique'}</span>
|
|
<button
|
|
type="button"
|
|
className="px-3 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700"
|
|
onClick={() => onSelect(series.id)}
|
|
>
|
|
Ouvrir
|
|
</button>
|
|
</div>
|
|
<div className="mt-2 text-xs text-blue-600">
|
|
<Link href={`/series/${series.id}`} className="underline">
|
|
Voir la page de la série
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|