Card Search Input

CardSearchInput provides a complete search experience with debounced queries, loading states, keyboard navigation, and accessibility features.

• 🔍 Real-time search with 300ms debounce
• ⌨️ Full keyboard navigation (↑/↓, Enter, Escape)
• ♿ ARIA-compliant for screen readers
• 🖼️ Card thumbnails with fallback placeholders
• 💰 Market price display when available
• 📦 Automatic result caching (5 min stale, 10 min cache)
• 🎨 Integrated with CircuitDS design system

import { CardSearchInput } from '@/components/ui/CardSearchInput';
import { Card } from '@/hooks/useCardSearch';

function MyComponent() {
  const handleCardSelect = (card: Card) => {
    console.log('Selected card:', card);
    // Update your state or perform action
  };

  return (
    <CardSearchInput 
      onSelect={handleCardSelect}
      placeholder="Search for Pokemon cards..."
    />
  );
}

interface Card {
  id: string;          // Pokemon TCG API card ID
  name: string;        // Card name
  set_code: string;    // Set code (e.g., "base1")
  card_number: string; // Card number in set
  image_url: string | null;
  set_name: string;    // Full set name
  rarity: string;      // Card rarity
  market_price: number | null; // Current market price
}

For custom implementations, you can use the useCardSearch hook directly:

// The component uses the useCardSearch hook internally
// You can also use it directly for custom implementations:

import { useCardSearch } from '@/hooks/useCardSearch';

function CustomCardSearch() {
  const [query, setQuery] = useState('');
  const { data, isLoading, error } = useCardSearch(query);
  
  // Custom UI implementation...
}

• ↓ - Navigate to next result
• ↑ - Navigate to previous result
• Enter - Select highlighted result
• Escape - Close dropdown and blur input

• Searches the Pokemon TCG API (pokemontcg.io)
• Minimum 2 characters required to trigger search
• Results are limited to 20 items per query
• Searches by card name with wildcard suffix
• Cached results persist for 5 minutes (stale) / 10 minutes (cache)