74 lines
3.0 KiB
PHP
74 lines
3.0 KiB
PHP
{{--
|
|
Explore index — uses ExploreLayout.
|
|
Displays an artwork grid with hero header, mode tabs, pagination.
|
|
--}}
|
|
@extends('layouts.nova.explore-layout')
|
|
|
|
@section('explore-grid')
|
|
|
|
{{-- ══ EGS §11: FEATURED SPOTLIGHT ROW ══ --}}
|
|
@if(!empty($spotlight) && $spotlight->isNotEmpty())
|
|
<div class="px-6 md:px-10 pt-6 pb-2">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="text-xs font-semibold uppercase tracking-widest text-amber-400">✦ Featured Today</span>
|
|
<span class="flex-1 border-t border-white/10"></span>
|
|
</div>
|
|
<div class="flex gap-4 overflow-x-auto nb-scrollbar-none pb-2">
|
|
@foreach($spotlight as $item)
|
|
<a href="{{ !empty($item->id) ? route('art.show', ['id' => $item->id, 'slug' => $item->slug ?? null]) : '#' }}"
|
|
class="group relative flex-none w-44 md:w-52 rounded-xl overflow-hidden
|
|
bg-neutral-800 border border-white/10 hover:border-amber-400/40
|
|
hover:shadow-lg hover:shadow-amber-500/10 transition-all duration-200"
|
|
title="{{ $item->name ?? '' }}">
|
|
|
|
{{-- Thumbnail --}}
|
|
<div class="aspect-[4/3] overflow-hidden bg-neutral-900">
|
|
<img
|
|
src="{{ $item->thumb_url ?? '' }}"
|
|
@if(!empty($item->thumb_srcset)) srcset="{{ $item->thumb_srcset }}" @endif
|
|
alt="{{ $item->name ?? 'Featured artwork' }}"
|
|
loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
|
|
{{-- Label overlay --}}
|
|
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent px-3 py-2">
|
|
<p class="text-xs font-medium text-white truncate leading-snug">{{ $item->name ?? '' }}</p>
|
|
@if(!empty($item->uname))
|
|
<p class="text-[10px] text-neutral-400 truncate">@{{ $item->uname }}</p>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@php
|
|
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
|
|
'id' => $art->id,
|
|
'name' => $art->name ?? null,
|
|
'thumb' => $art->thumb_url ?? $art->thumb ?? 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 ?? '',
|
|
'slug' => $art->slug ?? '',
|
|
'width' => $art->width ?? null,
|
|
'height' => $art->height ?? null,
|
|
])->values();
|
|
@endphp
|
|
|
|
<div
|
|
data-react-masonry-gallery
|
|
data-artworks="{{ json_encode($galleryArtworks) }}"
|
|
data-gallery-type="explore"
|
|
data-limit="24"
|
|
class="min-h-32 px-6 md:px-10 py-6"
|
|
></div>
|
|
|
|
@endsection
|