infisical/frontend/components/basic/Listbox.js

import React from "react";
import { Fragment } from "react";
import { useRouter } from "next/router";
import { faAngleDown,faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Listbox, Transition } from "@headlessui/react";

/**
 * This is the component that we use for drop down lists.
 * @param {*} param0
 * @returns
 */
export default function ListBox({
	selected,
	onChange,
	data,
	text,
	buttonAction,
	width,
	workspaceMapping = [],
}) {
	const router = useRouter();

	return (
		<Listbox value={selected} onChange={onChange}>
			<div className="relative">
				<Listbox.Button
					className={`text-gray-400 relative ${
						width == "full" ? "w-full" : "w-52"
					} cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
				>
					<div className="flex flex-row">
						{text}
						<span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
							{" "}
							{selected}
						</span>
					</div>
					{data && (
						<div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
							<FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5"/>
						</div>
					)}
				</Listbox.Button>
				{data && (
					<Transition
						as={Fragment}
						leave="transition ease-in duration-100"
						leaveFrom="opacity-100"
						leaveTo="opacity-0"
					>
						<Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
							{data.map((person, personIdx) => (
								<Listbox.Option
									key={personIdx}
									className={({ active, selected }) =>
										`my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
											selected
												? "bg-white/10 text-gray-400 font-bold"
												: ""
										} ${
											active & !selected
												? "bg-white/5 text-mineshaft-200 cursor-pointer"
												: "text-gray-400"
										} `
									}
									value={person}
								>
									{({ selected }) => (
										<>
											<span
												className={`block truncate text-primary${
													selected
														? "font-medium"
														: "font-normal"
												}`}
											>
												{person}
											</span>
											{selected ? (
												<span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
													<FontAwesomeIcon icon={faCheck} className="text-md ml-1"/>
												</span>
											) : null}
										</>
									)}
								</Listbox.Option>
							))}
							{buttonAction && (
								<button
									onClick={buttonAction}
									className="cursor-pointer w-full"
								>
									<div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
										<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
											<FontAwesomeIcon icon={faPlus} className="text-lg"/>
										</span>
										Add Project
									</div>
								</button>
							)}
						</Listbox.Options>
					</Transition>
				)}
			</div>
		</Listbox>
	);
}