68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { Search } from 'lucide-react';
|
|
|
|
export interface ConsoleSearchBarProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function ConsoleSearchBar({
|
|
value,
|
|
onChange,
|
|
placeholder = 'Search',
|
|
className,
|
|
style,
|
|
}: ConsoleSearchBarProps) {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
|
|
return (
|
|
<form
|
|
role="search"
|
|
className={className}
|
|
onSubmit={(event) => event.preventDefault()}
|
|
style={{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
...style,
|
|
}}
|
|
>
|
|
<Search
|
|
size={14}
|
|
style={{
|
|
position: 'absolute',
|
|
left: 10,
|
|
color: 'var(--color-ink-4)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
<input
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
placeholder={placeholder}
|
|
aria-label={placeholder}
|
|
style={{
|
|
height: 32,
|
|
width: '100%',
|
|
borderRadius: 12,
|
|
border: `1px solid ${isFocused ? 'var(--color-brand)' : 'var(--color-line)'}`,
|
|
background: isFocused ? 'var(--color-surface)' : 'var(--color-surface-subtle)',
|
|
paddingLeft: 32,
|
|
paddingRight: 12, // Removed space for kbd since it's not present here
|
|
fontSize: 13,
|
|
color: 'var(--color-ink-1)',
|
|
outline: 'none',
|
|
transition: 'border-color .2s, background .2s',
|
|
boxShadow: 'none',
|
|
}}
|
|
/>
|
|
</form>
|
|
);
|
|
}
|