update

resources/js/Pages/Profile/ProfileGallery.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { usePage } from '@inertiajs/react'
+import ProfileHero from '../../components/profile/ProfileHero'
+import ProfileGalleryPanel from '../../components/profile/ProfileGalleryPanel'
+
+export default function ProfileGallery() {
+  const { props } = usePage()
+  const {
+    user,
+    profile,
+    artworks,
+    featuredArtworks,
+    followerCount,
+    viewerIsFollowing,
+    heroBgUrl,
+    leaderboardRank,
+    countryName,
+    isOwner,
+    profileUrl,
+  } = props
+
+  const username = user.username || user.name
+  const displayName = user.name || user.username || 'Creator'
+
+  return (
+    <div className="min-h-screen pb-16">
+      <ProfileHero
+        user={user}
+        profile={profile}
+        isOwner={isOwner}
+        viewerIsFollowing={viewerIsFollowing}
+        followerCount={followerCount}
+        heroBgUrl={heroBgUrl}
+        countryName={countryName}
+        leaderboardRank={leaderboardRank}
+        extraActions={profileUrl ? (
+          <a
+            href={profileUrl}
+            className="inline-flex items-center gap-2 rounded-xl border border-white/15 px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/5 hover:text-white"
+          >
+            <i className="fa-solid fa-user fa-fw" />
+            View Profile
+          </a>
+        ) : null}
+      />
+
+      <div className="border-y border-white/10 bg-white/[0.02]">
+        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-5 md:flex-row md:items-end md:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-300/80">Public Gallery</p>
+            <h2 className="mt-1 text-2xl font-semibold tracking-tight text-white md:text-3xl">
+              {displayName}'s artworks
+            </h2>
+            <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-400">
+              Browse published work with the same infinite-scroll gallery used across the profile experience.
+            </p>
+          </div>
+
+          <a
+            href={profileUrl || '#'}
+            className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.06] hover:text-white"
+          >
+            <i className="fa-solid fa-arrow-left fa-fw" />
+            Back to profile
+          </a>
+        </div>
+      </div>
+
+      <div className="mx-auto w-full max-w-6xl px-4 pt-6 md:px-6">
+        <ProfileGalleryPanel
+          artworks={artworks}
+          featuredArtworks={featuredArtworks}
+          username={username}
+        />
+      </div>
+    </div>
+  )
+}