45 lines
1.9 KiB
JavaScript
45 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
|
|
const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
|
|
|
|
export default function ArtworkRelated({ related }) {
|
|
if (!Array.isArray(related) || related.length === 0) return null
|
|
|
|
return (
|
|
<section className="mt-12">
|
|
<h2 className="text-lg font-semibold text-white">Related Artworks</h2>
|
|
|
|
<div className="mt-5 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2 lg:grid lg:grid-cols-4 lg:gap-5 lg:overflow-visible">
|
|
{related.slice(0, 12).map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className="group min-w-[75%] snap-start overflow-hidden rounded-xl border border-nova-700 bg-panel transition lg:min-w-0 lg:hover:border-nova-500"
|
|
>
|
|
<a href={item.url} className="block">
|
|
<div className="relative aspect-video bg-deep">
|
|
<img
|
|
src={item.thumb || FALLBACK_MD}
|
|
srcSet={item.thumb_srcset || undefined}
|
|
sizes="(min-width: 1024px) 25vw, 75vw"
|
|
alt={item.title || 'Artwork'}
|
|
className="h-full w-full object-cover transition duration-300 lg:group-hover:scale-[1.03]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(event) => {
|
|
event.currentTarget.src = FALLBACK_MD
|
|
}}
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-deep/25 to-transparent lg:opacity-0 lg:transition lg:duration-300 lg:group-hover:opacity-100" />
|
|
</div>
|
|
<div className="p-3">
|
|
<h3 className="truncate text-sm font-semibold text-white">{item.title}</h3>
|
|
<p className="truncate text-xs text-soft">by {item.author || 'Artist'}</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|