31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
|
import { Link } from 'react-router-dom'
|
||
|
|
import type { Item } from '../types.js'
|
||
|
|
import Cover from './Cover.js'
|
||
|
|
|
||
|
|
export default function CoverGrid({ items }: { items: Item[] }) {
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
|
||
|
|
{items.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.id}
|
||
|
|
to={`/item/${item.id}`}
|
||
|
|
aria-label={`${item.artist} — ${item.title}`}
|
||
|
|
className="group"
|
||
|
|
>
|
||
|
|
<div className="relative">
|
||
|
|
<Cover src={item.artworkUrl} alt="" className="aspect-square w-full" />
|
||
|
|
<span
|
||
|
|
aria-label={item.ripStatus === 'ripped' ? 'ripped' : 'not ripped'}
|
||
|
|
className={`absolute right-1.5 top-1.5 size-3 rounded-full ring-2 ring-neutral-950 ${
|
||
|
|
item.ripStatus === 'ripped' ? 'bg-emerald-400' : 'bg-amber-500'
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p className="mt-1 truncate text-xs font-medium">{item.title}</p>
|
||
|
|
<p className="truncate text-xs text-neutral-500">{item.artist}</p>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|