SearchBar
Search input component with icon and styling.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
placeholder | string | No | 'Search' | Placeholder text for input |
Usage
import { SearchBar } from '@/components/molecules/SearchBar';
<SearchBar placeholder="Search articles..." />Features
- Search icon on the left
- Rounded full input styling
- Responsive width (full on mobile, 421px max on desktop)
- Uses design system colors and typography
Notes
- Client-side component (uses
'use client') - Currently displays input only (search functionality not implemented)
- Uses Icons component for search icon