components/editor-badge/comps/download_button.tsx

import { useRef, useState } from "react";
import { ChevronDownIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { useClickAway } from "react-use";

export const DownloadButton = ({
  onSave,
}: {
  onSave: (e?: boolean) => void;
}) => {
  const [dropdown, setDropdown] = useState(false);
  const ref = useRef(null);

  useClickAway(ref, () => {
    setDropdown(false);
  });

  return (
    <div
      ref={ref}
      className="flex justify-start mt-5 bg-darkGreen rounded-md relative"
    >
      <button
        onClick={() => onSave()}
        className="bg-darkGreen w-full text-white font-semibold p-2 rounded-l-md text-sm font-title relative overflow-hidden group"
      >
        <div className="absolute top-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
        <div className="absolute bottom-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
        <span className="relative z-1">Download as .zip</span>
      </button>
      <div
        className="bg-dark-600 bg-opacity-10 px-1.5 border-l border-dark-600 border-opacity-20 flex items-center hover:bg-opacity-20 cursor-pointer"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          setDropdown(!dropdown);
        }}
      >
        <ChevronDownIcon className="w-5 h-5 text-white" />
      </div>
      <div
        className={classNames(
          "bg-darkGreen w-full rounded-md absolute bottom-0 left-0 translate-y-[calc(100%+8px)] transition-all duration-200",
          {
            "pointer-events-none opacity-0 !-translate-y-1/2": !dropdown,
          }
        )}
      >
        <button
          onClick={() => onSave(true)}
          className="bg-darkGreen w-full text-white font-semibold p-2 rounded-md text-sm font-title relative overflow-hidden group"
        >
          <div className="absolute top-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
          <div className="absolute bottom-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
          <span className="relative z-1">Download as Image</span>
        </button>
      </div>
    </div>
  );
};