demeter

 1import { Search, X } from "lucide-react";
 2
 3export default function SearchBar({
 4  value,
 5  onChange,
 6  onClear,
 7  placeholder,
 8  style = {},
 9  className = "",
10}) {
11  return (
12    <div
13      style={{ position: "relative", flex: 1, maxWidth: 360, ...style }}
14      className={className}
15    >
16      <Search
17        size={14}
18        style={{
19          position: "absolute",
20          left: 10,
21          top: "50%",
22          transform: "translateY(-50%)",
23          color: "var(--text-3)",
24        }}
25      />
26      <input
27        value={value}
28        onChange={(e) => onChange(e.target.value)}
29        placeholder={placeholder}
30        style={{
31          width: "100%",
32          paddingLeft: 32,
33          paddingRight: value ? 28 : 12,
34          paddingTop: 7,
35          paddingBottom: 7,
36          borderRadius: 8,
37          fontSize: 13,
38          fontFamily: "DM Mono, monospace",
39          background: "var(--surface)",
40          border: "1px solid var(--border)",
41          color: "var(--text)",
42          outline: "none",
43          caretColor: "var(--green)",
44        }}
45      />
46      {value && (
47        <button
48          onClick={onClear}
49          style={{
50            position: "absolute",
51            right: 8,
52            top: "50%",
53            transform: "translateY(-50%)",
54            background: "none",
55            border: "none",
56            cursor: "pointer",
57            padding: 0,
58            color: "var(--text-3)",
59            display: "flex",
60            alignItems: "center",
61            justifyContent: "center",
62          }}
63        >
64          <X size={12} />
65        </button>
66      )}
67    </div>
68  );
69}