59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { Button } from './ui'
|
|
import type { Series } from '@/types/nostr'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface SeriesCardProps {
|
|
series: Series
|
|
onSelect: (seriesId: string | undefined) => void
|
|
selected?: boolean
|
|
}
|
|
|
|
function SeriesCardContent({ series, onSelect }: { series: Series; onSelect: (seriesId: string | undefined) => void }): React.ReactElement {
|
|
return (
|
|
<>
|
|
{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"
|
|
variant="primary"
|
|
size="small"
|
|
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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function SeriesCard({ series, onSelect, selected }: SeriesCardProps): React.ReactElement {
|
|
const cardClasses = 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'
|
|
return (
|
|
<div className={`border rounded-lg p-4 bg-cyber-dark transition-all ${cardClasses}`}>
|
|
<SeriesCardContent series={series} onSelect={onSelect} />
|
|
</div>
|
|
)
|
|
}
|