SearchBar

import { SearchBar } from '@adoptaunabuelo/react-components';

function SearchExample() {
  const handleSearch = (e) => {
    console.log('Search:', e.target.value);
  };

  return (
    <SearchBar
      placeholder="Search..."
      onChange={handleSearch}
    />
  );
}

<SearchBar
  type="big"
  placeholder="Search articles..."
  onChange={(e) => handleSearch(e.target.value)}
/>

<SearchBar
  type="small"
  placeholder="Search..."
  onChange={(e) => handleSearch(e.target.value)}
/>

<SearchBar
  design="primary"
  type="big"
  placeholder="Search..."
  onChange={handleSearch}
/>

<SearchBar
  design="secondary"
  type="big"
  placeholder="Search..."
  onChange={handleSearch}
/>

import { SearchBar } from '@adoptaunabuelo/react-components';
import { useState } from 'react';

function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    
    // Perform search
    const filteredResults = products.filter(product =>
      product.name.toLowerCase().includes(value.toLowerCase())
    );
    setResults(filteredResults);
  };

  return (
    <div>
      <SearchBar
        type="big"
        design="primary"
        placeholder="Search products..."
        value={searchTerm}
        onChange={handleSearch}
      />
      
      <div>
        {results.map(result => (
          <div key={result.id}>{result.name}</div>
        ))}
      </div>
    </div>
  );
}

<SearchBar
  id="custom-search"
  placeholder="Search..."
  style={{ width: '100%', maxWidth: '600px' }}
  onChange={handleSearch}
/>