update

resources/views/web/members/photos.blade.php

@@ -1,43 +1,64 @@
 @extends('layouts.nova')
 
+@php
+    $memberPhotoBreadcrumbs = collect([
+        (object) ['name' => 'Members', 'url' => route('creators.top')],
+        (object) ['name' => $page_title ?? 'Member Photos', 'url' => route('members.photos')],
+    ]);
+    $memberPhotoItems = collect(method_exists($artworks ?? null, 'items') ? $artworks->items() : ($artworks ?? []));
+    $memberPhotoGallery = $memberPhotoItems->map(fn ($art) => [
+        'id' => $art->id ?? null,
+        'name' => $art->name ?? $art->title ?? 'Artwork',
+        'slug' => $art->slug ?? \Illuminate\Support\Str::slug($art->name ?? $art->title ?? 'artwork'),
+        'url' => $art->url ?? ((isset($art->id) && $art->id) ? '/art/' . $art->id . '/' . ($art->slug ?? \Illuminate\Support\Str::slug($art->name ?? $art->title ?? 'artwork')) : '#'),
+        'thumb' => $art->thumb ?? $art->thumb_url ?? null,
+        'thumb_url' => $art->thumb_url ?? $art->thumb ?? null,
+        'thumb_srcset' => $art->thumb_srcset ?? null,
+        'uname' => $art->uname ?? $art->author ?? '',
+        'username' => $art->username ?? $art->uname ?? '',
+        'avatar_url' => $art->avatar_url ?? null,
+        'content_type_name' => $art->content_type_name ?? '',
+        'content_type_slug' => $art->content_type_slug ?? '',
+        'category_name' => $art->category_name ?? '',
+        'category_slug' => $art->category_slug ?? '',
+        'width' => $art->width ?? null,
+        'height' => $art->height ?? null,
+        'published_at' => !empty($art->published_at)
+            ? (method_exists($art->published_at, 'toIsoString') ? $art->published_at->toIsoString() : (string) $art->published_at)
+            : null,
+    ]);
+    $memberPhotosNextPageUrl = method_exists($artworks ?? null, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
+@endphp
+
 @section('content')
 
-{{-- ── Hero header ── --}}
-<div class="px-6 pt-10 pb-6 md:px-10">
-    <div>
-        <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Members</p>
-        <h1 class="text-3xl font-bold text-white leading-tight">{{ $page_title ?? 'Member Photos' }}</h1>
-        <p class="mt-1 text-sm text-white/50">Artwork submitted by the Skinbase community.</p>
-    </div>
-</div>
+<x-nova-page-header
+    section="Members"
+    :title="$page_title ?? 'Member Photos'"
+    icon="fa-images"
+    :breadcrumbs="$memberPhotoBreadcrumbs"
+    description="Artwork submitted by the Skinbase community, presented in the shared Nova gallery feed."
+    headerClass="pb-6"
+>
+    <x-slot name="actions">
+        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-sky-500/10 text-sky-200 ring-1 ring-sky-400/25">
+            <span class="w-1.5 h-1.5 rounded-full bg-sky-300"></span>
+            Community uploads
+        </span>
+    </x-slot>
+</x-nova-page-header>
 
 {{-- ── Artwork grid ── --}}
 <div class="px-6 pb-16 md:px-10">
-    @php $items = is_object($artworks) && method_exists($artworks, 'toArray') ? $artworks : collect($artworks ?? []); @endphp
-
-    @if (!empty($artworks) && (is_countable($artworks) ? count($artworks) > 0 : true))
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-5">
-            @foreach ($artworks as $art)
-                @php
-                    $card = (object)[
-                        'id'            => $art->id ?? null,
-                        'name'          => $art->name ?? $art->title ?? 'Artwork',
-                        'thumb'         => $art->thumb ?? $art->thumb_url ?? null,
-                        'thumb_srcset'  => $art->thumb_srcset ?? null,
-                        'uname'         => $art->uname ?? $art->author ?? '',
-                        'category_name' => $art->category_name ?? '',
-                        'slug'          => $art->slug ?? \Illuminate\Support\Str::slug($art->name ?? 'artwork'),
-                    ];
-                @endphp
-                <x-artwork-card :art="$card" />
-            @endforeach
-        </div>
-
-        @if (is_object($artworks) && method_exists($artworks, 'links'))
-            <div class="mt-10 flex justify-center">
-                {{ $artworks->withQueryString()->links() }}
-            </div>
-        @endif
+    @if ($memberPhotoGallery->isNotEmpty())
+        <div
+            data-react-masonry-gallery
+            data-artworks='@json($memberPhotoGallery)'
+            data-gallery-type="member-photos"
+            @if ($memberPhotosNextPageUrl) data-next-page-url="{{ $memberPhotosNextPageUrl }}" @endif
+            data-limit="{{ method_exists($artworks ?? null, 'perPage') ? $artworks->perPage() : $memberPhotoGallery->count() }}"
+            class="min-h-32"
+        ></div>
     @else
         <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
             <p class="text-white/40 text-sm">No artworks found.</p>
@@ -46,3 +67,7 @@
 </div>
 
 @endsection
+
+@push('scripts')
+@vite('resources/js/entry-masonry-gallery.jsx')
+@endpush