mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 04:51:09 -05:00
cc33781245
- Added rides index view with search and filter options. - Created rides show view to display ride details. - Implemented API routes for rides. - Developed authentication routes for user registration, login, and email verification. - Created tests for authentication, email verification, password reset, and user profile management. - Added feature tests for rides and operators, including creation, updating, deletion, and searching. - Implemented soft deletes and caching for rides and operators. - Enhanced manufacturer and operator model tests for various functionalities.
65 lines
4.1 KiB
PHP
65 lines
4.1 KiB
PHP
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-900">Featured Photo</h3>
|
|
|
|
@if ($isLoading)
|
|
<div class="flex justify-center items-center py-12">
|
|
<svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
@elseif ($error)
|
|
<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded relative" role="alert">
|
|
<span class="block sm:inline">{{ $error }}</span>
|
|
</div>
|
|
@elseif (count($photos) === 0)
|
|
<div class="text-center py-8 text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<p>No photos available</p>
|
|
<p class="text-sm mt-1">Upload photos to select a featured image.</p>
|
|
</div>
|
|
@else
|
|
@if ($success)
|
|
<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<span class="block sm:inline">Featured photo updated successfully!</span>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
|
@foreach ($photos as $photo)
|
|
<div
|
|
wire:key="featured-photo-{{ $photo->id }}"
|
|
class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 {{ $featuredPhotoId === $photo->id ? 'ring-2 ring-yellow-500 ring-offset-2' : '' }}"
|
|
>
|
|
<img
|
|
src="{{ $photo->url }}"
|
|
alt="{{ $photo->alt_text ?? $photo->title ?? 'Park photo' }}"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
|
|
@if ($featuredPhotoId === $photo->id)
|
|
<div class="absolute top-2 left-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">
|
|
Featured
|
|
</div>
|
|
@endif
|
|
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center">
|
|
@if ($featuredPhotoId !== $photo->id)
|
|
<button
|
|
wire:click="setFeatured({{ $photo->id }})"
|
|
class="opacity-0 hover:opacity-100 p-2 bg-white rounded-full text-gray-800 hover:bg-yellow-500 hover:text-white transition-colors duration-200"
|
|
title="Set as featured"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div> |