pacnpal/thrillwiki_laravel
1
0
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_laravel.git synced 2025-12-20 10:11:11 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Implement Global Search component with caching and tests

Browse Source
This commit is contained in:
pacnpal
2025-06-23 08:12:56 -04:00
parent bd08111971
commit ecf237d592
7 changed files with 193 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
resources/views/livewire/autocomplete-component.blade.php Normal file
View File

@@ -0,0 +1,31 @@
{{-- ThrillWiki Reusable Component: AutocompleteComponent --}}
<div class="thrillwiki-component"
x-data="{ loading: false }"
wire:loading.class="opacity-50">
{{-- Component Header --}}
<div class="component-header mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
AutocompleteComponent
</h3>
</div>
{{-- Component Content --}}
<div class="component-content">
<p class="text-gray-600 dark:text-gray-400">
ThrillWiki component content goes here.
</p>
{{-- Example interactive element --}}
<button wire:click="$refresh"
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
Refresh Component
</button>
</div>
{{-- Loading State --}}
<div wire:loading wire:target="$refresh"
class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div>
</div>

31
resources/views/livewire/global-search-component.blade.php Normal file
View File

@@ -0,0 +1,31 @@
{{-- ThrillWiki Reusable Component: GlobalSearchComponent --}}
<div class="thrillwiki-component"
x-data="{ loading: false }"
wire:loading.class="opacity-50">
{{-- Component Header --}}
<div class="component-header mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
GlobalSearchComponent
</h3>
</div>
{{-- Component Content --}}
<div class="component-content">
<p class="text-gray-600 dark:text-gray-400">
ThrillWiki component content goes here.
</p>
{{-- Example interactive element --}}
<button wire:click="$refresh"
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
Refresh Component
</button>
</div>
{{-- Loading State --}}
<div wire:loading wire:target="$refresh"
class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div>
</div>