Function DownloadDropdown

components/download-dropdown.tsx:23–108

({
  targetId,
  originalImageUrl,
  fileName = "github-creature",
  pixelRatio = 2,
}: DownloadDropdownProps)

  pixelRatio?: number;
}

export default function DownloadDropdown({
  targetId,
  originalImageUrl,
  fileName = "github-creature",
  pixelRatio = 2,
}: DownloadDropdownProps) {
  const [isDownloading, setIsDownloading] = React.useState(false);

  const downloadCardWithEffects = React.useCallback(async () => {
    const node = document.querySelector(`#${targetId}`);
    if (!node) {
      return;
    }

    setIsDownloading(true);
    try {
      try {
        await document.fonts?.ready;
      } catch {
        // ignore
      }

      const dataUrl = await domToPng(node, {
        onCloneNode: (cloned) => {
          if (cloned instanceof HTMLElement) {
            cloned.style.transform = "none";
            cloned.style.transformStyle = "flat";
            cloned.style.boxShadow = "none";
          }
        },
        scale: pixelRatio,
      });

      const link = document.createElement("a");
      link.href = dataUrl;
      link.download = `${fileName}-card.png`;
      link.click();
    } catch (error) {
      console.error("Failed to download card image", error);
    } finally {
      setIsDownloading(false);
    }
  }, [fileName, pixelRatio, targetId]);

  const downloadOriginalImage = React.useCallback(async () => {
    setIsDownloading(true);
    try {
      const response = await fetch(originalImageUrl);
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = url;
      link.download = `${fileName}.png`;
      link.click();

      URL.revokeObjectURL(url);