diff --git a/src/components/Select.js b/src/components/Select.js new file mode 100644 index 0000000..f215fb3 --- /dev/null +++ b/src/components/Select.js @@ -0,0 +1,36 @@ +import { $html, $for } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** SELECT */ +export const Select = (props) => { + const { label, options, value, ...rest } = props; + + const selectEl = $html( + "select", + { + ...rest, + class: joinClass("select select-bordered w-full", props.class), + value: value + }, + $for( + () => val(options) || [], + (opt) => + $html( + "option", + { + value: opt.value, + $selected: () => String(val(value)) === String(opt.value), + }, + opt.label, + ), + (opt) => opt.value, + ), + ); + + if (!label) return selectEl; + + return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [ + $html("span", {}, label), + selectEl + ]); +};