106 lines
5.0 KiB
PHP
106 lines
5.0 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@push('head')
|
|
<meta name="robots" content="noindex,follow">
|
|
<meta name="description" content="Search Skinbase artworks, photography, wallpapers and skins.">
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="px-6 pt-10 pb-8 md:px-10" id="search-page" data-q="{{ $q ?? '' }}">
|
|
@php
|
|
$hasQuery = isset($q) && $q !== '';
|
|
$resultCount = method_exists($artworks, 'total') ? (int) $artworks->total() : 0;
|
|
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
|
|
'id' => $art->id ?? null,
|
|
'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,
|
|
'views' => $art->views ?? null,
|
|
'likes' => $art->likes ?? null,
|
|
'downloads' => $art->downloads ?? null,
|
|
])->values();
|
|
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
|
|
@endphp
|
|
|
|
<div class="mb-8">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="mb-1 text-xs font-semibold uppercase tracking-widest text-white/30">Discover</p>
|
|
<h1 class="flex items-center gap-3 text-3xl font-bold leading-tight text-white">
|
|
<i class="fa-solid fa-magnifying-glass text-2xl text-sky-400"></i>
|
|
Search
|
|
</h1>
|
|
<p class="mt-1 text-sm text-white/50">
|
|
{{ $hasQuery ? 'Results for "' . $q . '"' : 'Find artworks, creators, and styles across Skinbase.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="/search" method="GET" class="relative mt-5 max-w-3xl" role="search">
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
value="{{ $q ?? '' }}"
|
|
placeholder="Search artworks, artists, tags..."
|
|
autofocus
|
|
class="w-full rounded-xl border border-white/10 bg-white/[0.05] py-3 pl-4 pr-12 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-sky-500"
|
|
>
|
|
@if($hasQuery)
|
|
<input type="hidden" name="sort" value="{{ $sort ?? 'latest' }}">
|
|
@endif
|
|
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 transition-colors hover:text-sky-400">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
@if($hasQuery)
|
|
<div class="mb-6 flex flex-wrap items-center gap-3">
|
|
<span class="text-sm text-neutral-400">Sort by:</span>
|
|
@foreach(['latest' => 'Newest', 'popular' => 'Most viewed', 'likes' => 'Most liked', 'downloads' => 'Most downloaded'] as $key => $label)
|
|
<a
|
|
href="{{ request()->fullUrlWithQuery(['sort' => $key, 'page' => null]) }}"
|
|
class="rounded-lg px-3 py-1.5 text-xs font-medium transition-colors {{ ($sort ?? 'latest') === $key ? 'bg-sky-500 text-white' : 'bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white' }}"
|
|
>
|
|
{{ $label }}
|
|
</a>
|
|
@endforeach
|
|
|
|
<span class="ml-auto text-sm text-neutral-500">
|
|
{{ number_format($resultCount) }} {{ $resultCount === 1 ? 'result' : 'results' }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if($hasQuery && $resultCount === 0)
|
|
<div class="rounded-xl border border-white/[0.06] bg-white/[0.03] p-14 text-center">
|
|
<p class="mb-2 text-lg text-neutral-400">No results for <span class="text-white">"{{ $q }}"</span></p>
|
|
<p class="text-sm text-neutral-500">Try a different keyword or browse <a href="/discover/trending" class="text-sky-400 hover:underline">trending artworks</a>.</p>
|
|
</div>
|
|
@else
|
|
<div
|
|
data-react-masonry-gallery
|
|
data-artworks="{{ json_encode($galleryArtworks) }}"
|
|
data-gallery-type="search"
|
|
@if($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
|
|
data-limit="24"
|
|
class="min-h-32"
|
|
></div>
|
|
@endif
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@vite('resources/js/entry-masonry-gallery.jsx')
|
|
@endpush
|