Add placeholder images, enhance alert styles, and implement theme toggle component with dark mode support

This commit is contained in:
pacnpal
2025-02-23 22:12:26 -05:00
parent 27e584f427
commit 0ba7add72f
44 changed files with 2188 additions and 227 deletions

View File

@@ -0,0 +1,39 @@
<div>
<button
wire:click="toggle"
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
aria-label="Toggle mobile menu"
aria-expanded="{{ $isOpen }}"
>
<i class="text-2xl fas {{ $isOpen ? 'fa-times' : 'fa-bars' }}"></i>
</button>
<!-- Mobile Menu -->
<div
wire:model="isOpen"
class="absolute left-0 right-0 w-full p-4 mt-2 space-y-4 bg-white border-b dark:bg-gray-800 dark:border-gray-700"
style="display: {{ $isOpen ? 'block' : 'none' }}"
>
<!-- Search (Mobile) -->
<form action="{{ route('search') }}" method="get" class="mb-4">
<input
type="text"
name="q"
placeholder="Search parks and rides..."
class="form-input"
/>
</form>
<!-- Mobile Navigation Links -->
<nav class="space-y-2">
<a href="{{ route('parks.index') }}" class="block nav-link">
<i class="fas fa-map-marker-alt"></i>
<span>Parks</span>
</a>
<a href="{{ route('rides.index') }}" class="block nav-link">
<i class="fas fa-rocket"></i>
<span>Rides</span>
</a>
</nav>
</div>
</div>