components/search/comps/dropdown.tsx

import { CheckCircleIcon } from "@heroicons/react/solid";
import classNames from "classnames";

import { useTags } from "components/search/hooks/useTags";

export const Dropdown = ({
  open = false,
  onSelect,
  search,
  tags: selectedTags,
}: {
  open: boolean;
  tags: string[];
  search?: string;
  onSelect: (e: string) => void;
}) => {
  const tags = useTags();
  const filteredTags = tags?.filter((tag) => tag.includes(search || ""));

  return (
    <div
      className={classNames(
        "absolute opacity-0 bottom-0 left-0 w-full bg-dark-600 max-h-[220px] overflow-auto shadow-lg transition-all duration-200 ease-in-out rounded-lg transform translate-y-[calc(100%+8px)] py-3 px-2 z-10",
        {
          "opacity-100 translate-y-full": open,
          "pointer-events-none": !open,
        }
      )}
    >
      <ul>
        {filteredTags?.map((tag, i) => (
          <li
            key={i}
            className="flex items-center justify-between gap-2 capitalize bg-dark-200 text-white bg-opacity-0 hover:bg-opacity-20 p-3 rounded-md cursor-pointer"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onSelect(tag);
            }}
          >
            {tag}
            {selectedTags.includes(tag) && (
              <CheckCircleIcon className="w-5 text-darkGreen" />
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};