Credentials UI (#1828)

skyvern-frontend/src/components/DropdownWithOptions.tsx

@@ -0,0 +1,50 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+type Item = {
+  label: string;
+  value: string;
+};
+
+type Props = {
+  options: Item[];
+  value: string;
+  onChange: (selected: string) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+function DropdownWithOptions({
+  options,
+  value,
+  onChange,
+  placeholder,
+  className,
+}: Props) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(value) => {
+        onChange(value);
+      }}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="max-h-48">
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { DropdownWithOptions };