Gregor Klevze
eee7df1f8c
- Infinite loop carousels for Similar Artworks & Trending rails
- Mouse wheel horizontal scrolling on both carousels
- Author avatar shown on hover in RailCard (similar + trending)
- Removed "View" badge from RailCard hover overlay
- Added `id` to Meilisearch filterable attributes
- Auto-prepend Scout prefix in meilisearch:configure-index command
- Added author name + avatar to Similar Artworks API response
- Added avatar_url to ArtworkListResource author object
- Added direct /art/{id}/{slug} URL to ArtworkListResource
- Fixed race condition: Similar Artworks no longer briefly shows trending items
- Fixed user_profiles eager load (user_id primary key, not id)
- Bumped /api/art/{id}/similar rate limit to 300/min
- Removed decorative heart icons from tag pills
- Moved ReactionBar under artwork description
34 lines
1.4 KiB
JavaScript
34 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
|
|
const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
|
|
|
|
export default function ArtworkCardMini({ item }) {
|
|
if (!item?.url) return null
|
|
|
|
return (
|
|
<article className="group min-w-[14rem] shrink-0 snap-start overflow-hidden rounded-xl border border-white/[0.06] bg-white/[0.03] transition-all duration-200 hover:-translate-y-0.5 hover:border-white/[0.1] hover:shadow-xl hover:shadow-black/30">
|
|
<a href={item.url} className="block">
|
|
<div className="relative aspect-[4/3] overflow-hidden bg-deep">
|
|
<img
|
|
src={item.thumb || FALLBACK_MD}
|
|
srcSet={item.thumbSrcSet || undefined}
|
|
sizes="256px"
|
|
alt={item.title || 'Artwork'}
|
|
className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(event) => {
|
|
event.currentTarget.src = FALLBACK_MD
|
|
}}
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-60" />
|
|
</div>
|
|
<div className="px-3.5 py-3">
|
|
<h3 className="truncate text-sm font-semibold text-white/90">{item.title || 'Untitled'}</h3>
|
|
<p className="mt-0.5 truncate text-xs text-white/40">by {item.author || 'Artist'}</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
)
|
|
}
|