Function SelectBox

components/selectBox.tsx:13–150

(props: {
  title?: string;
  options: SelectBoxOption[];
  selected: string | null;
  setSelected: (selected: string) => void;
  theme?: "light" | "dark";
  size?: "small" | "base";
  includeNull?: boolean;
})

}

export default function SelectBox(props: {
  title?: string;
  options: SelectBoxOption[];
  selected: string | null;
  setSelected: (selected: string) => void;
  theme?: "light" | "dark";
  size?: "small" | "base";
  includeNull?: boolean;
}) {
  /**
   * selected: the id of the selected option
   * setSelected: a function that takes the id of the selected option
   */
  // Defaults
  const theme = props.theme ?? "light";
  const size = props.size ?? "small";

  return (
    <Listbox value={props.selected} onChange={props.setSelected}>
      {({ open }) => (
        <>
          {props.title && (
            <Listbox.Label
              className={classNames(
                "block font-medium leading-6",
                theme === "light" ? "text-gray-700" : "text-gray-200",
                size === "small" ? "text-sm" : size === "base" && "text-base",
              )}
            >
              {props.title}
            </Listbox.Label>
          )}
          <div className="relative flex-1">
            <Listbox.Button
              className={classNames(
                "relative w-full cursor-default rounded-md py-1.5 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-purple-600 sm:leading-6",
                theme === "light"
                  ? "bg-gray-50 text-gray-900 ring-purple-300"
                  : props.selected === null
                  ? "bg-gray-700 text-gray-400 ring-gray-300"
                  : "bg-gray-700 text-gray-300 ring-gray-400",
                size === "small"
                  ? "text-sm py-1.5"
                  : size === "base" && "text-base py-[0.6875rem]",
              )}
            >
              <div className="flex flex-row place-items-center gap-x-1">
                {props.options.find((o) => props.selected === o.id)?.icon}
                <span className="block truncate">
                  {props.options.find((o) => props.selected === o.id)?.name ??
                    "Select an option"}
                </span>
              </div>
              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                <ChevronUpDownIcon
                  className="h-5 w-5 text-gray-400"
                  aria-hidden="true"
                />