feat: ship creator journey v2 and profile updates
This commit is contained in:
@@ -1,9 +1,37 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import LevelBadge from '../../components/xp/LevelBadge'
|
||||
|
||||
function ScrollBtn({ direction, onClick }) {
|
||||
const isLeft = direction === 'left'
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
aria-label={`Scroll ${direction}`}
|
||||
className={[
|
||||
'absolute top-1/2 z-30 -translate-y-1/2 hidden lg:flex h-9 w-9 items-center justify-center',
|
||||
'rounded-full bg-black/60 text-white ring-1 ring-white/12 backdrop-blur-md',
|
||||
'transition hover:bg-black/80 hover:ring-white/20',
|
||||
isLeft ? 'left-1' : 'right-1',
|
||||
].join(' ')}
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
|
||||
{isLeft
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />}
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function TrendingArtworks() {
|
||||
const [items, setItems] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const scrollRef = useRef(null)
|
||||
const touchStartRef = useRef({ x: 0, y: 0 })
|
||||
const draggedRef = useRef(false)
|
||||
const suppressClickRef = useRef(false)
|
||||
const suppressTimerRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
@@ -28,51 +56,111 @@ export default function TrendingArtworks() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scroll = useCallback((dir) => {
|
||||
const el = scrollRef.current
|
||||
if (!el) return
|
||||
el.scrollBy({ left: dir === 'left' ? -320 : 320, behavior: 'smooth' })
|
||||
}, [])
|
||||
|
||||
const onTouchStart = useCallback((e) => {
|
||||
if (!e.touches?.length) return
|
||||
touchStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
|
||||
draggedRef.current = false
|
||||
}, [])
|
||||
|
||||
const onTouchMove = useCallback((e) => {
|
||||
if (!e.touches?.length) return
|
||||
const dx = Math.abs(e.touches[0].clientX - touchStartRef.current.x)
|
||||
const dy = Math.abs(e.touches[0].clientY - touchStartRef.current.y)
|
||||
if (dx > 10 && dx > dy) draggedRef.current = true
|
||||
}, [])
|
||||
|
||||
const onTouchEnd = useCallback(() => {
|
||||
if (!draggedRef.current) return
|
||||
suppressClickRef.current = true
|
||||
clearTimeout(suppressTimerRef.current)
|
||||
suppressTimerRef.current = setTimeout(() => { suppressClickRef.current = false }, 260)
|
||||
}, [])
|
||||
|
||||
const onClickCapture = useCallback((e) => {
|
||||
if (!suppressClickRef.current) return
|
||||
const link = e.target?.closest?.('a')
|
||||
if (link) { e.preventDefault(); e.stopPropagation() }
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Trending Artworks</h2>
|
||||
<a className="text-xs text-cyan-300 hover:text-cyan-200" href="/discover/trending">
|
||||
<section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
|
||||
<div className="flex items-center justify-between px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Discover</p>
|
||||
<h2 className="mt-1 text-xl font-semibold text-white">Trending Artworks</h2>
|
||||
</div>
|
||||
<a
|
||||
className="inline-flex items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
|
||||
href="/discover/trending"
|
||||
>
|
||||
Explore more
|
||||
<i className="fa-solid fa-arrow-right text-[10px]" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{loading ? <p className="text-sm text-gray-400">Loading trending artworks...</p> : null}
|
||||
{loading ? (
|
||||
<div className="flex gap-3 overflow-hidden px-5 pb-5 sm:px-6 sm:pb-6">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-52 w-36 shrink-0 animate-pulse rounded-2xl bg-white/5" />
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">No trending artworks available.</p>
|
||||
<p className="px-5 pb-5 text-sm text-slate-400 sm:px-6 sm:pb-6">No trending artworks available.</p>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-900/70 transition hover:scale-[1.02] hover:border-cyan-500/40"
|
||||
>
|
||||
<img
|
||||
src={item.thumbnail || '/images/placeholder.jpg'}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
className="h-28 w-full object-cover sm:h-32"
|
||||
/>
|
||||
<div className="p-2">
|
||||
<p className="line-clamp-1 text-sm font-semibold text-white">{item.title}</p>
|
||||
{item.creator ? (
|
||||
<div className="mt-1 flex items-center justify-between gap-2">
|
||||
<span className="truncate text-xs text-gray-400">
|
||||
{item.creator.username ? `@${item.creator.username}` : item.creator.name}
|
||||
</span>
|
||||
<LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
|
||||
<div className="relative pb-5 sm:pb-6" data-nav-swipe-ignore="1">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r from-[#08111c] to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l from-[#08111c] to-transparent" />
|
||||
<ScrollBtn direction="left" onClick={() => scroll('left')} />
|
||||
<ScrollBtn direction="right" onClick={() => scroll('right')} />
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onTouchEnd={onTouchEnd}
|
||||
onClickCapture={onClickCapture}
|
||||
className="flex gap-3 overflow-x-auto px-5 snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:px-6"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className="group relative w-36 shrink-0 snap-start overflow-hidden rounded-2xl ring-1 ring-white/8 transition hover:-translate-y-0.5 hover:ring-sky-400/25 sm:w-40"
|
||||
>
|
||||
<div className="relative aspect-[3/4] bg-neutral-900">
|
||||
<div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-br from-white/8 via-transparent to-transparent" />
|
||||
<img
|
||||
src={item.thumbnail || '/images/placeholder.jpg'}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/85 via-black/55 to-transparent p-3">
|
||||
<p className="line-clamp-2 text-xs font-semibold leading-snug text-white">{item.title}</p>
|
||||
{item.creator ? (
|
||||
<>
|
||||
<p className="mt-1 truncate text-[11px] text-white/65">
|
||||
{item.creator.username ? `@${item.creator.username}` : item.creator.name}
|
||||
</p>
|
||||
<div className="mt-1.5">
|
||||
<LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<p className="mt-1 text-xs text-gray-400">
|
||||
{item.likes} likes • {item.views} views
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user