updated gallery

resources/views/web/featured-artworks.blade.php

@@ -1,49 +1,84 @@
 @extends('layouts.nova')
 
+@php
+    $featuredBreadcrumbs = collect([
+        (object) ['name' => 'Featured', 'url' => request()->path()],
+        (object) ['name' => $page_title ?? 'Featured Artworks', 'url' => request()->fullUrl()],
+    ]);
+
+    $galleryArtworks = collect($artworks->items())->map(fn ($art) => [
+        'id'            => $art->id,
+        'name'          => $art->name ?? null,
+        'slug'          => $art->slug ?? null,
+        'url'           => $art->url ?? null,
+        'thumb'         => $art->thumb_url ?? null,
+        'thumb_url'     => $art->thumb_url ?? null,
+        'thumb_srcset'  => $art->thumb_srcset ?? null,
+        'uname'         => $art->uname ?? '',
+        'username'      => $art->username ?? $art->uname ?? '',
+        'avatar_url'    => $art->avatar_url ?? null,
+        'category_name' => $art->category_name ?? '',
+        'category_slug' => $art->category_slug ?? '',
+        'width'         => $art->width ?? null,
+        'height'        => $art->height ?? null,
+    ])->values();
+
+    $galleryNextPageUrl = $artworks->nextPageUrl();
+@endphp
+
 @section('content')
-<div class="container-fluid legacy-page">
-    <div class="effect2 page-header-wrap">
-        <header class="page-heading">
-            <h1 class="page-header">{{ $page_title ?? 'Featured Artworks' }}</h1>
-        </header>
-
-        <div class="mb-3">
-            <strong>Show:</strong>
-            <ul id="recentTab" class="list-inline">
-                @foreach($artworkTypes as $k => $label)
-                    <li class="list-inline-item">
-                        <a href="/featured-artworks?type={{ (int)$k }}" @if((int)$k === (int)$type) class="active" @endif>{{ $label }}</a>
-                    </li>
-                @endforeach
-            </ul>
-            <br style="clear:both">
-        </div>
-    </div>
-
-    @if($artworks)
-        <div class="container_photo gallery_box">
-            @foreach($artworks as $art)
-                @php
-                    $card = (object) [
-                        'url' => url('/art/' . ($art->id ?? '') . '/' . \Illuminate\Support\Str::slug($art->name ?? '')),
-                        'thumb' => $art->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp',
-                        'thumb_srcset' => $art->thumb_srcset ?? null,
-                        'name' => $art->name ?? '',
-                        'uname' => $art->uname ?? 'Unknown',
-                        'gid_num' => $art->gid_num ?? 0,
-                        'category_name' => $art->category_name ?? '',
-                    ];
-                @endphp
-                @include('web.partials._artwork_card', ['art' => $card])
+<x-nova-page-header
+    section="Featured"
+    :title="$page_title ?? 'Featured Artworks'"
+    icon="fa-star"
+    :breadcrumbs="$featuredBreadcrumbs"
+    description="Browse staff-picked and community-highlighted artwork in the shared gallery feed."
+    headerClass="pb-6"
+    actionsClass="lg:pt-8"
+>
+    <x-slot name="actions">
+        <div class="flex flex-wrap items-center gap-2 text-sm">
+            @foreach($artworkTypes as $k => $label)
+                <a
+                    href="{{ url()->current() }}?type={{ (int) $k }}"
+                    class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {{ (int) $k === (int) $type ? 'bg-amber-500/20 text-amber-200 ring-1 ring-amber-400/30' : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}"
+                >
+                    {{ $label }}
+                </a>
             @endforeach
         </div>
-    @else
-        <p class="text-muted">No artworks found.</p>
-    @endif
+    </x-slot>
+</x-nova-page-header>
 
-
-    <div class="paginationMenu text-center">
-        @if($artworks){{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}@endif
-    </div>
-</div>
+<section class="px-6 pt-8 md:px-10">
+    <div
+        data-react-masonry-gallery
+        data-artworks="{{ json_encode($galleryArtworks) }}"
+        data-gallery-type="featured"
+        @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
+        data-limit="39"
+        class="min-h-32"
+    ></div>
+</section>
 @endsection
+
+@push('styles')
+<style>
+    @media (min-width: 1024px) {
+        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    }
+    @media (min-width: 1600px) {
+        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    }
+    @media (min-width: 2600px) {
+        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    }
+</style>
+@endpush
+
+@push('scripts')
+@vite('resources/js/entry-masonry-gallery.jsx')
+@endpush