plane/apps/app/ui/custom-listbox/index.tsx

import React from "react";
// headless ui
import { Listbox, Transition } from "@headlessui/react";

import { Props } from "./types";

const CustomListbox: React.FC<Props> = ({
  title = "",
  options,
  value,
  onChange,
  multiple,
  icon,
  width,
  footerOption,
  optionsFontsize,
  className,
  label,
}) => {
  return (
    <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
      {({ open }) => (
        <>
          {label && (
            <Listbox.Label>
              <div className="mb-2 text-gray-500">{label}</div>
            </Listbox.Label>
          )}
          <Listbox.Button
            className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500
              ${className || "px-2 py-1"}`}
          >
            {icon ?? null}
            <div className="flex items-center gap-2 truncate">
              {Array.isArray(value) ? (
                value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
                `${title}`
              ) : (
                <>
                  {options?.find((o) => o.value === value)?.color && (
                    <span
                      className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                      style={{
                        backgroundColor: options?.find((o) => o.value === value)?.color,
                      }}
                    ></span>
                  )}{" "}
                  {options?.find((o) => o.value === value)?.display || `${title}`}
                </>
              )}
            </div>
          </Listbox.Button>

          <Transition
            show={open}
            as={React.Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options
              className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg ${
                optionsFontsize === "sm"
                  ? "text-xs"
                  : optionsFontsize === "md"
                  ? "text-base"
                  : optionsFontsize === "lg"
                  ? "text-lg"
                  : optionsFontsize === "xl"
                  ? "text-xl"
                  : optionsFontsize === "2xl"
                  ? "text-2xl"
                  : ""
              } z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
            >
              <div className="py-1">
                {options ? (
                  options.length > 0 ? (
                    options.map((option) => (
                      <Listbox.Option
                        key={option.value}
                        className={({ selected, active }) =>
                          `${
                            selected ||
                            (Array.isArray(value)
                              ? value.includes(option.value)
                              : value === option.value)
                              ? "bg-indigo-50 font-medium"
                              : ""
                          } ${
                            active ? "bg-indigo-50" : ""
                          } relative cursor-pointer select-none p-2 text-gray-900`
                        }
                        value={option.value}
                      >
                        <span className={` flex items-center gap-2 truncate`}>
                          {option.icon}
                          {option.color && (
                            <span
                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                              style={{
                                backgroundColor: option.color,
                              }}
                            ></span>
                          )}
                          {option.display}
                        </span>
                      </Listbox.Option>
                    ))
                  ) : (
                    <p className="text-center text-sm text-gray-500">No options</p>
                  )
                ) : (
                  <p className="text-center text-sm text-gray-500">Loading...</p>
                )}
              </div>
              {footerOption ?? null}
            </Listbox.Options>
          </Transition>
        </>
      )}
    </Listbox>
  );
};

export default CustomListbox;