52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import type { Series } from '@/types/nostr'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface SeriesCardProps {
|
|
series: Series
|
|
onSelect: (seriesId: string | undefined) => void
|
|
selected?: boolean
|
|
}
|
|
|
|
export function SeriesCard({ series, onSelect, selected }: SeriesCardProps): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={`border rounded-lg p-4 bg-cyber-dark transition-all ${
|
|
selected
|
|
? 'border-neon-cyan ring-1 ring-neon-cyan/50 shadow-glow-cyan'
|
|
: 'border-neon-cyan/30 hover:border-neon-cyan/50 hover:shadow-glow-cyan'
|
|
}`}
|
|
>
|
|
{series.coverUrl && (
|
|
<div className="relative w-full h-40 mb-3 rounded-lg overflow-hidden border border-neon-cyan/20">
|
|
<Image
|
|
src={series.coverUrl}
|
|
alt={series.title}
|
|
className="object-cover"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-semibold text-neon-cyan mb-2">{series.title}</h3>
|
|
<p className="text-sm text-cyber-accent line-clamp-3 mb-3">{series.description}</p>
|
|
<div className="mt-3 flex items-center justify-between text-sm text-cyber-accent/70">
|
|
<span>{series.category === 'science-fiction' ? t('category.science-fiction') : t('category.scientific-research')}</span>
|
|
<button
|
|
type="button"
|
|
className="px-3 py-1 text-sm rounded-lg bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border border-neon-cyan/50 hover:shadow-glow-cyan transition-all font-medium"
|
|
onClick={() => onSelect(series.id)}
|
|
>
|
|
{t('common.open')}
|
|
</button>
|
|
</div>
|
|
<div className="mt-2 text-xs text-neon-cyan/70">
|
|
<Link href={`/series/${series.id}`} className="hover:text-neon-cyan transition-colors underline">
|
|
{t('series.view')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|