Create Select component

webui/src/common/components/Select/Select.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react';
+import './styles.sass';
+
+export const Select = ({
+  label,
+  error,
+  options = [],
+  placeholder,
+  className,
+  containerClassName,
+  ...rest
+}) => {
+  return (
+    <div className={`field ${containerClassName || ''}`}>
+      {label && <label className="field-label">{label}</label>}
+      <div className={`field-control has-icon ${error ? 'has-error' : ''} ${className || ''}`}>
+        <select className="field-select" {...rest}>
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <span className="field-icon field-icon--right">
+          <CaretDownIcon size={16} />
+        </span>
+      </div>
+      {error && <div className="field-error">{error}</div>}
+    </div>
+  );
+};

webui/src/common/components/Select/index.js

@@ -0,0 +1 @@
+export { Select as default } from './Select.jsx';

webui/src/common/components/Select/styles.sass

@@ -0,0 +1,30 @@
+.field-select
+  appearance: none
+  background: transparent
+  border: 0
+  color: var(--text)
+  font: inherit
+  font-size: 1rem
+  font-weight: 500
+  width: 100%
+  line-height: 1.3
+  outline: none
+  cursor: pointer
+  padding-right: 2.5rem
+  
+  &:focus
+    outline: none
+  
+  &:disabled
+    opacity: 0.6
+    cursor: not-allowed
+
+.field-control.has-icon .field-icon--right
+  position: absolute
+  right: 1rem
+  top: 50%
+  transform: translateY(-50%)
+  pointer-events: none
+  color: var(--text-dim)
+  display: inline-flex
+  z-index: 1