79 lines
2.4 KiB
JavaScript
79 lines
2.4 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' },
|
|
]
|
|
|
|
function GalleryToolbar({ sort, onSort }) {
|
|
return (
|
|
<div className="mb-5 flex flex-wrap items-center gap-3">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">Sort</span>
|
|
<div className="flex flex-wrap gap-1 rounded-2xl border border-white/10 bg-white/[0.03] p-1">
|
|
{SORT_OPTIONS.map((opt) => (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => onSort(opt.value)}
|
|
className={`rounded-xl px-3.5 py-2 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:bg-white/5 hover:text-white'
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ProfileGalleryPanel({ artworks, username }) {
|
|
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 response = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
|
|
headers: { Accept: 'application/json' },
|
|
})
|
|
|
|
if (!response.ok) {
|
|
return
|
|
}
|
|
|
|
const data = await response.json()
|
|
setItems(data.data ?? data)
|
|
setNextCursor(data.next_cursor ?? null)
|
|
} catch (_) {}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="mx-auto w-full max-w-6xl px-4 md:px-6">
|
|
<GalleryToolbar sort={sort} onSort={handleSort} />
|
|
</div>
|
|
|
|
<div className="w-full px-4 md:px-6 xl:px-8">
|
|
<MasonryGallery
|
|
key={`profile-${username}-${sort}`}
|
|
artworks={items}
|
|
galleryType="profile"
|
|
cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
|
|
initialNextCursor={nextCursor}
|
|
limit={24}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|