39 lines
925 B
TypeScript
39 lines
925 B
TypeScript
import { Search } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
import { Input } from './Input';
|
|
|
|
interface SearchBarProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder: string;
|
|
onSubmit?: () => void;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function SearchBar({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
onSubmit,
|
|
actions,
|
|
}: SearchBarProps) {
|
|
return (
|
|
<div className="surface-card p-4">
|
|
<div className="flex gap-4 items-center">
|
|
<div className="flex-1">
|
|
<Input
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') onSubmit?.();
|
|
}}
|
|
icon={<Search className="h-4 w-4 icon-flat" />}
|
|
/>
|
|
</div>
|
|
{actions && <div className="flex gap-2">{actions}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|