update

resources/js/components/profile/ProfileGalleryPanel.jsx

@@ -0,0 +1,109 @@
+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 slugify(str) {
+  return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+}
+
+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="mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
+        <i className="fa-solid fa-star fa-fw text-amber-400" />
+        Featured
+      </h2>
+      <div className="scrollbar-hide flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2">
+        {featuredArtworks.slice(0, 5).map((art) => (
+          <a
+            key={art.id}
+            href={`/art/${art.id}/${slugify(art.name)}`}
+            className="group w-56 shrink-0 snap-start md:w-64"
+          >
+            <div className="aspect-[5/3] overflow-hidden rounded-xl bg-black/30 ring-1 ring-white/10 transition-all hover:ring-sky-400/40">
+              <img
+                src={art.thumb}
+                alt={art.name}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                loading="lazy"
+              />
+            </div>
+            <p className="mt-2 truncate text-sm text-slate-300 transition-colors group-hover:text-white">
+              {art.name}
+            </p>
+            {art.label ? <p className="truncate text-[11px] text-slate-600">{art.label}</p> : null}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function ProfileGalleryPanel({ artworks, featuredArtworks, 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 (
+    <>
+      <FeaturedStrip featuredArtworks={featuredArtworks} />
+
+      <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">
+          {SORT_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => handleSort(opt.value)}
+              className={`rounded-lg px-3 py-1.5 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>
+
+      <MasonryGallery
+        key={`profile-${username}-${sort}`}
+        artworks={items}
+        galleryType="profile"
+        cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
+        initialNextCursor={nextCursor}
+        limit={24}
+      />
+    </>
+  )
+}