function FilterPopover()

in dashboard/client/src/GithubIssueList.tsx [599:666]
66 lines of code
2 McCabe index (conditional complexity)

function FilterPopover(props: {
  title: string;
  button: ReactNode;
  children: (props: { close: () => void }) => ReactNode;
  left?: boolean;
}) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const close = () => {
    if (buttonRef.current) {
      buttonRef.current.click();
    }
  };

  return (
    <Popover className="relative">
      {({ open }) => (
        <>
          <Popover.Button ref={buttonRef} className="focus:outline-none">
            {props.button}
          </Popover.Button>

          <div
            className={classNames("absolute z-popup mt-2", {
              "right-0": !props.left,
              "left-0": props.left,
            })}
          >
            <Transition
              show={open}
              enter="transition-transform duration-100 ease-out"
              enterFrom="transform -translate-y-2 opacity-0"
              enterTo="transform translate-y-0 opacity-100"
              leave="transition duration-100 ease-out"
              leaveFrom="transform opacity-100"
              leaveTo="transform opacity-0"
            >
              <Popover.Panel className="border shadow rounded bg-white flex flex-col">
                <div className="w-[300px]">
                  <div className="flex flex-row justify-between items-center border-b px-2">
                    <span className="p-2 text-base font-bold">
                      {props.title}
                    </span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-4 w-4 cursor-pointer"
                      onClick={close}
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M6 18L18 6M6 6l12 12"
                      />
                    </svg>
                  </div>
                  {props.children({ close })}
                </div>
              </Popover.Panel>
            </Transition>
          </div>
        </>
      )}
    </Popover>
  );
}