File size: 3,109 Bytes
0c20ea8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import { Fragment } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import { Poi } from "../../../redux/types/Poi";
type DropDownProps = {
poiList: Poi[];
selectedPoi: Poi;
setSelectedPoi: React.Dispatch<React.SetStateAction<Poi>>;
};
const DropDown: React.FC<DropDownProps> = ({
poiList,
selectedPoi,
setSelectedPoi,
}) => {
return (
<div className="w-72" style={{ fontFamily: "airbnb_light" }}>
<Listbox value={selectedPoi} onChange={setSelectedPoi}>
<div className="relative mt-1">
<Listbox.Button
className="relative w-full cursor-pointer rounded-lg bg-white py-2 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 border border-gray-300" // Add border classes here
>
<span className="block truncate">{selectedPoi.address}</span>
<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"
/>
</span>
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-gray-300" // Add border classes here
style={{ zIndex: 9999 }}
>
{poiList.map((poi, index) => (
<Listbox.Option
key={index}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
active ? "bg-[#ECEEFF] text-[#00000]" : "text-gray-900"
}`
}
value={poi}
>
{({ selected }) => (
<>
<span
className={`block truncate ${
selected ? "font-medium" : "font-normal"
}`}
>
{poi.address}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[#9BA4FF]">
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</Listbox>
</div>
);
};
export default DropDown;
|