diff --git a/webui/src/common/components/Select/Select.jsx b/webui/src/common/components/Select/Select.jsx new file mode 100644 index 0000000..0eeb6a9 --- /dev/null +++ b/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 ( +
+ {label && } +
+ + + + +
+ {error &&
{error}
} +
+ ); +}; \ No newline at end of file diff --git a/webui/src/common/components/Select/index.js b/webui/src/common/components/Select/index.js new file mode 100644 index 0000000..ea68f04 --- /dev/null +++ b/webui/src/common/components/Select/index.js @@ -0,0 +1 @@ +export { Select as default } from './Select.jsx'; \ No newline at end of file diff --git a/webui/src/common/components/Select/styles.sass b/webui/src/common/components/Select/styles.sass new file mode 100644 index 0000000..c3938ab --- /dev/null +++ b/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 \ No newline at end of file