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
68 lines
2.5 KiB
JavaScript
68 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
|
|
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
|
|
|
|
function CreatorCard({ creator }) {
|
|
return (
|
|
<article className="group flex flex-col items-center rounded-2xl bg-nova-800/60 p-5 ring-1 ring-white/5 hover:ring-white/10 hover:bg-nova-800 transition">
|
|
<a href={creator.url} className="block">
|
|
<img
|
|
src={creator.avatar || AVATAR_FALLBACK}
|
|
alt={creator.name}
|
|
className="mx-auto h-14 w-14 rounded-full object-cover ring-2 ring-white/10 group-hover:ring-accent/50 transition"
|
|
loading="lazy"
|
|
onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
|
|
/>
|
|
</a>
|
|
|
|
<div className="mt-3 w-full text-center">
|
|
<a href={creator.url} className="block truncate text-sm font-semibold text-white hover:text-accent transition">
|
|
{creator.name}
|
|
</a>
|
|
{creator.username && (
|
|
<p className="truncate text-xs text-nova-400">@{creator.username}</p>
|
|
)}
|
|
<div className="mt-2 flex items-center justify-center gap-3 text-xs text-nova-500">
|
|
{creator.followers_count > 0 && (
|
|
<span title="Followers">{creator.followers_count.toLocaleString()} followers</span>
|
|
)}
|
|
{creator.artworks_count > 0 && (
|
|
<span title="Artworks">{creator.artworks_count.toLocaleString()} artworks</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href={creator.url}
|
|
className="mt-4 w-full rounded-lg bg-nova-700 py-1.5 text-center text-xs font-medium text-white hover:bg-nova-600 transition"
|
|
>
|
|
View Profile
|
|
</a>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default function HomeSuggestedCreators({ creators }) {
|
|
if (!Array.isArray(creators) || creators.length === 0) return null
|
|
|
|
return (
|
|
<section className="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white">💡 Suggested Creators</h2>
|
|
<p className="mt-0.5 text-xs text-nova-400">Creators you might enjoy following</p>
|
|
</div>
|
|
<a href="/creators/top" className="text-sm text-nova-300 hover:text-white transition">
|
|
Explore all →
|
|
</a>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
|
|
{creators.map((creator) => (
|
|
<CreatorCard key={creator.id} creator={creator} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|