Import
import { SearchBar } from '@adoptaunabuelo/react-components';
Usage
<SearchBar
type="big"
design="primary"
placeholder="Search..."
onChange={(e) => handleSearch(e.target.value)}
/>
Props
Size variant: big (48px height) or small (38px height)
Visual design: primary (gray background) or secondary (white with border)
Placeholder text for the search input
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when the input value changes
Custom styles for the container
Unique identifier for the search bar
Features
- Magnifying glass icon (lucide-react Search component)
- Auto-focuses on click and changes style on interaction
- Two size variants: big (48px) and small (38px)
- Two design variants: primary (gray background) and secondary (white with border)
- Rounded pill shape (100px border radius)
- Font size: 14px (small) or 16px (big with secondary design)
- Supports all standard HTML input props
Examples
Primary Design (Big)
<SearchBar
type="big"
design="primary"
placeholder="Search articles..."
onChange={(e) => setSearchQuery(e.target.value)}
/>
Secondary Design (Small)
<SearchBar
type="small"
design="secondary"
placeholder="Find..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
Controlled Search Bar
const [searchValue, setSearchValue] = useState('');
<SearchBar
type="big"
design="primary"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Type to search..."
/>
