123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
import React, { useState } from 'react'
|
|
import MasonryGallery from '../../gallery/MasonryGallery'
|
|
|
|
const SORT_OPTIONS = [
|
|
{ value: 'latest', label: 'Latest' },
|
|
{ value: 'trending', label: 'Trending' },
|
|
{ value: 'rising', label: 'Rising' },
|
|
{ value: 'views', label: 'Most Viewed' },
|
|
{ value: 'favs', label: 'Most Favourited' },
|
|
]
|
|
|
|
/**
|
|
* Featured artworks horizontal scroll strip.
|
|
*/
|
|
function FeaturedStrip({ featuredArtworks }) {
|
|
if (!featuredArtworks?.length) return null
|
|
|
|
return (
|
|
<div className="mb-7 rounded-2xl border border-white/10 bg-white/[0.02] p-4 md:p-5">
|
|
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3 flex items-center gap-2">
|
|
<i className="fa-solid fa-star text-amber-400 fa-fw" />
|
|
Featured
|
|
</h2>
|
|
<div className="flex gap-4 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
|
|
{featuredArtworks.slice(0, 5).map((art) => (
|
|
<a
|
|
key={art.id}
|
|
href={`/art/${art.id}/${slugify(art.name)}`}
|
|
className="group shrink-0 snap-start w-56 md:w-64"
|
|
>
|
|
<div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 aspect-[5/3] hover:ring-sky-400/40 transition-all">
|
|
<img
|
|
src={art.thumb}
|
|
alt={art.name}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-slate-300 mt-2 truncate group-hover:text-white transition-colors">
|
|
{art.name}
|
|
</p>
|
|
{art.label && (
|
|
<p className="text-[11px] text-slate-600 truncate">{art.label}</p>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function slugify(str) {
|
|
return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
|
}
|
|
|
|
/**
|
|
* TabArtworks
|
|
* Features: sort selector, featured strip, masonry-style artwork grid,
|
|
* skeleton loading, empty state, load-more pagination.
|
|
*/
|
|
export default function TabArtworks({ artworks, featuredArtworks, username, isActive }) {
|
|
const [sort, setSort] = useState('latest')
|
|
const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
|
|
const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
|
|
|
|
const handleSort = async (newSort) => {
|
|
setSort(newSort)
|
|
setItems([])
|
|
try {
|
|
const res = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
|
|
headers: { Accept: 'application/json' },
|
|
})
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setItems(data.data ?? data)
|
|
setNextCursor(data.next_cursor ?? null)
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
id="tabpanel-artworks"
|
|
role="tabpanel"
|
|
aria-labelledby="tab-artworks"
|
|
className="pt-6"
|
|
>
|
|
{/* Featured strip */}
|
|
<FeaturedStrip featuredArtworks={featuredArtworks} />
|
|
|
|
{/* Sort bar */}
|
|
<div className="flex items-center gap-3 mb-5 flex-wrap">
|
|
<span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Sort</span>
|
|
<div className="flex gap-1 flex-wrap">
|
|
{SORT_OPTIONS.map((opt) => (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => handleSort(opt.value)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
sort === opt.value
|
|
? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Shared masonry gallery component reused from discover/explore */}
|
|
<MasonryGallery
|
|
key={`profile-${username}-${sort}`}
|
|
artworks={items}
|
|
galleryType="profile"
|
|
cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
|
|
initialNextCursor={nextCursor}
|
|
limit={24}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|