Initial commit

src/components/ConsoleSearchBar.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}