egutierrez
74b4c40f18
Input de busqueda con icono, debounce configurable y boton de limpiar. Exportado desde index.ts del barrel de UI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
---
|
|
name: search_bar
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "SearchBar(props: SearchBarProps): JSX.Element"
|
|
description: "Search input with debounce, search icon, and clear button"
|
|
tags: [component, ui, search, input, debounce]
|
|
uses_functions: [cn_ts_core]
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["lucide-react"]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/search_bar.tsx"
|
|
props:
|
|
- name: onSearch
|
|
type: "(query: string) => void"
|
|
required: true
|
|
description: "Called with the debounced search query"
|
|
- name: placeholder
|
|
type: "string"
|
|
required: false
|
|
description: "Placeholder text (default: Search...)"
|
|
- name: debounceMs
|
|
type: "number"
|
|
required: false
|
|
description: "Debounce delay in ms (default: 300)"
|
|
- name: className
|
|
type: "string"
|
|
required: false
|
|
description: "Additional CSS classes"
|
|
emits: []
|
|
has_state: true
|
|
framework: react
|
|
variant: []
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { SearchBar } from '@fn_library'
|
|
|
|
function MyPage() {
|
|
return (
|
|
<SearchBar
|
|
onSearch={(query) => console.log('search:', query)}
|
|
placeholder="Search entities..."
|
|
debounceMs={300}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Notas
|
|
|
|
- Debounce usa ref para evitar re-renders innecesarios del callback
|
|
- El icono de clear solo aparece cuando hay texto
|
|
- Usa CSS variables del tema para colores (border, input, foreground, muted-foreground)
|