update

resources/js/components/profile/tabs/TabArtworks.jsx

@@ -1,82 +1,7 @@
-import React, { useState } from 'react'
-import MasonryGallery from '../../gallery/MasonryGallery'
+import React from 'react'
+import ProfileGalleryPanel from '../ProfileGalleryPanel'
 
-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
@@ -85,37 +10,10 @@ export default function TabArtworks({ artworks, featuredArtworks, username, isAc
       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}
+      <ProfileGalleryPanel
+        artworks={artworks}
+        featuredArtworks={featuredArtworks}
+        username={username}
       />
     </div>
   )