107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useMemo } from 'react';
|
|
|
|
import { MangaReadRecord, MangaSearchItem, MangaShelfItem } from '@/lib/manga.types';
|
|
|
|
import ProxyImage from './ProxyImage';
|
|
|
|
interface MangaCardProps {
|
|
item: MangaSearchItem | MangaShelfItem | MangaReadRecord;
|
|
href: string;
|
|
subtitle?: string;
|
|
badge?: string;
|
|
updateCount?: number;
|
|
}
|
|
|
|
export default function MangaCard({ item, href, subtitle, badge, updateCount }: MangaCardProps) {
|
|
const sourceName = useMemo(() => {
|
|
if ('sourceName' in item) return item.sourceName;
|
|
return '';
|
|
}, [item]);
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className='group overflow-hidden rounded-2xl border border-gray-200/70 bg-white/90 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-gray-700 dark:bg-gray-900/80'
|
|
>
|
|
<div className='relative aspect-[3/4] overflow-hidden bg-gray-100 dark:bg-gray-800'>
|
|
{item.cover ? (
|
|
<ProxyImage
|
|
originalSrc={item.cover}
|
|
alt={item.title}
|
|
className='h-full w-full object-cover transition duration-300 group-hover:scale-105'
|
|
/>
|
|
) : (
|
|
<div className='flex h-full items-center justify-center text-sm text-gray-400'>暂无封面</div>
|
|
)}
|
|
{badge && (
|
|
<span className='absolute left-3 top-3 rounded-full bg-black/65 px-2 py-1 text-xs text-white'>
|
|
{badge}
|
|
</span>
|
|
)}
|
|
{updateCount && updateCount > 0 && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '10px',
|
|
right: '10px',
|
|
zIndex: 20,
|
|
pointerEvents: 'none',
|
|
width: '28px',
|
|
height: '28px',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: '0',
|
|
borderRadius: '9999px',
|
|
backgroundColor: 'rgb(14 165 233)',
|
|
animation: 'ping-scale 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: '0',
|
|
borderRadius: '9999px',
|
|
backgroundColor: 'rgb(14 165 233)',
|
|
animation: 'pulse-scale 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: '0',
|
|
borderRadius: '9999px',
|
|
background:
|
|
'linear-gradient(to bottom right, rgb(14 165 233), rgb(2 132 199))',
|
|
color: 'white',
|
|
fontSize: '11px',
|
|
fontWeight: 'bold',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow:
|
|
'0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
animation: 'badge-scale 2s ease-in-out infinite',
|
|
}}
|
|
>
|
|
+{updateCount}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className='space-y-1 p-3'>
|
|
<div className='line-clamp-2 min-h-[2.75rem] text-sm font-semibold text-gray-900 dark:text-gray-100'>
|
|
{item.title}
|
|
</div>
|
|
{sourceName && <div className='text-xs text-gray-500 dark:text-gray-400'>{sourceName}</div>}
|
|
{subtitle && <div className='line-clamp-2 text-xs text-sky-600 dark:text-sky-400'>{subtitle}</div>}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|