first commit

src/components/SearchField.tsx

@@ -0,0 +1,60 @@
+import { Search } from "lucide-react";
+import type { ChangeEventHandler, CSSProperties } from "react";
+
+type SearchFieldProps = {
+  placeholder: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  containerStyle?: CSSProperties;
+  inputStyle?: CSSProperties;
+  autoComplete?: string;
+};
+
+export default function SearchField({
+  placeholder,
+  value,
+  onChange,
+  containerStyle,
+  inputStyle,
+  autoComplete = "off",
+}: SearchFieldProps) {
+  return (
+    <div
+      style={{
+        position: "relative",
+        flex: "1 1 320px",
+        minWidth: 220,
+        ...containerStyle,
+      }}
+    >
+      <Search
+        size={13}
+        style={{
+          position: "absolute",
+          left: 10,
+          top: "50%",
+          transform: "translateY(-50%)",
+          color: "var(--text-muted)",
+          pointerEvents: "none",
+        }}
+      />
+      <input
+        className="input"
+        type="text"
+        name="panel-search-field"
+        autoComplete={autoComplete}
+        autoCorrect="off"
+        autoCapitalize="none"
+        spellCheck={false}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        style={{
+          paddingLeft: 30,
+          width: "100%",
+          ...inputStyle,
+        }}
+      />
+    </div>
+  );
+}