search bar

client/src/components/SearchBar.astro

@@ -0,0 +1,129 @@
+---
+// Import necessary utilities
+import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
+
+// Define the props interface
+export interface Props {
+  placeholder?: string;
+  onSearch?: (query: string) => void;
+}
+
+// Destructure props
+const { placeholder, onSearch } = Astro.props;
+
+// Get current language
+const currentLang = getLanguageFromPath(Astro.url.pathname);
+const defaultPlaceholder = t('elements.searchPlaceholder', currentLang);
+
+// Get current search query from URL
+const currentSearchQuery = Astro.url.searchParams.get('search') || '';
+---
+
+<div class="mb-6">
+  <div class="relative">
+    <input
+      type="text"
+      id="search-input"
+      placeholder={placeholder || defaultPlaceholder}
+      value={currentSearchQuery}
+      class="w-full px-4 py-3 pl-12 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+    />
+    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+      <svg class="h-5 w-5 text-gray-400" 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"></path>
+      </svg>
+    </div>
+    <button
+      id="clear-search"
+      class="absolute inset-y-0 right-0 pr-3 flex items-center opacity-0 pointer-events-none transition-opacity duration-200 hover:text-gray-600"
+      aria-label="Clear search"
+    >
+      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<script>
+  // Client-side search functionality with API calls
+  const searchInput = document.getElementById('search-input') as HTMLInputElement;
+  const clearButton = document.getElementById('clear-search') as HTMLButtonElement;
+  const elementsContainer = document.querySelector('[data-elements-container]');
+  
+  if (searchInput && elementsContainer) {
+    let searchTimeout: NodeJS.Timeout;
+    
+    // Function to update clear button visibility
+    const updateClearButton = () => {
+      const hasValue = searchInput.value.length > 0;
+      clearButton.style.opacity = hasValue ? '1' : '0';
+      clearButton.style.pointerEvents = hasValue ? 'auto' : 'none';
+    };
+    
+    // Function to fetch filtered data from API
+    const fetchFilteredElements = async (query: string) => {
+      try {
+        // Show loading state
+        if (elementsContainer) {
+          elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-gray-500 text-lg">Searching...</p></div>';
+        }
+        
+        // Build the API URL with search parameters
+        const currentUrl = new URL(window.location.href);
+        if (query.trim()) {
+          currentUrl.searchParams.set('search', query.trim());
+        } else {
+          currentUrl.searchParams.delete('search');
+        }
+        
+        // Fetch the new page content
+        const response = await fetch(currentUrl.toString());
+        const html = await response.text();
+        
+        // Parse the HTML and extract the elements container
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const newElementsContainer = doc.querySelector('[data-elements-container]');
+        
+        if (newElementsContainer && elementsContainer) {
+          elementsContainer.innerHTML = newElementsContainer.innerHTML;
+        }
+        
+        // Update URL without page reload
+        window.history.pushState({}, '', currentUrl.toString());
+        
+      } catch (error) {
+        console.error('Error fetching filtered elements:', error);
+        if (elementsContainer) {
+          elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-red-500 text-lg">Error loading results</p></div>';
+        }
+      }
+    };
+    
+    // Search input event listener with debouncing
+    searchInput.addEventListener('input', (e) => {
+      const query = (e.target as HTMLInputElement).value;
+      updateClearButton();
+      
+      // Clear previous timeout
+      clearTimeout(searchTimeout);
+      
+      // Set new timeout for debounced search
+      searchTimeout = setTimeout(() => {
+        fetchFilteredElements(query);
+      }, 300); // 300ms delay
+    });
+    
+    // Clear button event listener
+    clearButton.addEventListener('click', () => {
+      searchInput.value = '';
+      updateClearButton();
+      fetchFilteredElements('');
+      searchInput.focus();
+    });
+    
+    // Initialize clear button state
+    updateClearButton();
+  }
+</script>