77 lines
2.5 KiB
Plaintext
77 lines
2.5 KiB
Plaintext
---
|
|
interface Props {
|
|
placeholder?: string;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const {
|
|
placeholder = "Search...",
|
|
ariaLabel = "Search",
|
|
className = "",
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class={`search-container ${className}`}>
|
|
<!-- Hidden live region for screen readers -->
|
|
<div
|
|
id="search-status"
|
|
class="sr-only"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
Showing all services
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<label for="app-search" class="sr-only">{ariaLabel}</label>
|
|
<!-- Search icon -->
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none">
|
|
<svg class="w-4 h-4 zag-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
id="app-search"
|
|
type="text"
|
|
x-model="searchQuery"
|
|
placeholder={placeholder}
|
|
role="searchbox"
|
|
aria-label={ariaLabel}
|
|
aria-describedby="search-status search-hint"
|
|
aria-controls="app-list"
|
|
class="w-full pl-8 pr-8 py-1 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-current zag-text zag-bg"
|
|
/>
|
|
<button
|
|
x-show="searchQuery"
|
|
@click="searchQuery = ''"
|
|
aria-label="Clear search"
|
|
class="absolute right-2 top-1/2 transform -translate-y-1/2"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 zag-text" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tooltip area - shows either help text or status text -->
|
|
<div class="mt-1 h-5 text-center"> <!-- Fixed height to prevent layout shift -->
|
|
<!-- Keyboard shortcut hint - shown when search is empty -->
|
|
<div
|
|
id="search-hint"
|
|
class="text-xs zag-text"
|
|
x-show="searchQuery === ''"
|
|
>
|
|
<kbd class="px-1 py-0.5 text-xs border border-current rounded zag-text">/ </kbd> to search, <kbd class="px-1 py-0.5 text-xs border border-current rounded zag-text">Esc</kbd> to clear
|
|
</div>
|
|
|
|
<!-- Status text - shown when user is typing -->
|
|
<div
|
|
id="visible-status"
|
|
class="text-xs zag-text"
|
|
x-show="searchQuery !== ''"
|
|
x-text="hasResults ? 'Found ' + visibleCount + ' ' + (visibleCount === 1 ? 'item' : 'items') : 'No results found'"
|
|
></div>
|
|
</div>
|
|
</div>
|