demeter

 1import { ChevronDown } from "lucide-react";
 2
 3export default function SelectField({
 4  value,
 5  onChange,
 6  options = [],
 7  style = {},
 8  className = "",
 9  ...props
10}) {
11  // Options should be an array of { value, label }
12  return (
13    <div style={{ position: "relative", ...style }} className={className}>
14      <select
15        value={value}
16        onChange={onChange}
17        style={{
18          appearance: "none",
19          padding: "5px 24px 5px 10px",
20          borderRadius: 8,
21          fontSize: 12,
22          fontFamily: "DM Mono, monospace",
23          background: "var(--surface)",
24          border: "1px solid var(--border)",
25          color: "var(--text-2)",
26          cursor: "pointer",
27          outline: "none",
28          width: "100%",
29        }}
30        {...props}
31      >
32        {options.map((opt, i) => (
33          <option key={i} value={opt.value}>
34            {opt.label}
35          </option>
36        ))}
37      </select>
38      <ChevronDown
39        size={10}
40        style={{
41          position: "absolute",
42          right: 8,
43          top: "50%",
44          transform: "translateY(-50%)",
45          pointerEvents: "none",
46          color: "var(--text-3)",
47        }}
48      />
49    </div>
50  );
51}