feat: add new cta to download all file as a zip

package.json

@@ -15,6 +15,8 @@
     "@jsquash/jxl": "^1.0.0",
     "@jsquash/png": "^2.0.0",
     "@jsquash/webp": "^1.2.0",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -35,4 +37,4 @@
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"
   }
-}
+}

src/App.tsx

@@ -1,16 +1,25 @@
-import React, { useState, useCallback } from 'react';
-import { Image, Trash2 } from 'lucide-react';
-import { CompressionOptions } from './components/CompressionOptions';
-import { DropZone } from './components/DropZone';
-import { ImageList } from './components/ImageList';
-import { DownloadAll } from './components/DownloadAll';
-import { useImageQueue } from './hooks/useImageQueue';
-import { DEFAULT_QUALITY_SETTINGS } from './utils/formatDefaults';
-import type { ImageFile, OutputType, CompressionOptions as CompressionOptionsType } from './types';
+import React, { useState, useCallback } from "react";
+import { Image, Trash2 } from "lucide-react";
+import { CompressionOptions } from "./components/CompressionOptions";
+import { DropZone } from "./components/DropZone";
+import { ImageList } from "./components/ImageList";
+import { DownloadAll } from "./components/DownloadAll";
+import { useImageQueue } from "./hooks/useImageQueue";
+
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
+import { DEFAULT_QUALITY_SETTINGS } from "./utils/formatDefaults";
+import type {
+  ImageFile,
+  OutputType,
+  CompressionOptions as CompressionOptionsType,
+} from "./types";
+import { DownloadZip } from "./components/DownloadZip";
 
 export function App() {
   const [images, setImages] = useState<ImageFile[]>([]);
-  const [outputType, setOutputType] = useState<OutputType>('webp');
+  const [outputType, setOutputType] = useState<OutputType>("webp");
   const [options, setOptions] = useState<CompressionOptionsType>({
     quality: DEFAULT_QUALITY_SETTINGS.webp,
   });
@@ -19,34 +28,37 @@ export function App() {
 
   const handleOutputTypeChange = useCallback((type: OutputType) => {
     setOutputType(type);
-    if (type !== 'png') {
+    if (type !== "png") {
       setOptions({ quality: DEFAULT_QUALITY_SETTINGS[type] });
     }
   }, []);
 
-  const handleFilesDrop = useCallback((newImages: ImageFile[]) => {
-    // First add all images to state
-    setImages((prev) => [...prev, ...newImages]);
-
-    // Use requestAnimationFrame to wait for render to complete
-    requestAnimationFrame(() => {
-      // Then add to queue after UI has updated
-      newImages.forEach(image => addToQueue(image.id));
-    });
-  }, [addToQueue]);
+  const handleFilesDrop = useCallback(
+    (newImages: ImageFile[]) => {
+      // First add all images to state
+      setImages((prev) => [...prev, ...newImages]);
+
+      // Use requestAnimationFrame to wait for render to complete
+      requestAnimationFrame(() => {
+        // Then add to queue after UI has updated
+        newImages.forEach((image) => addToQueue(image.id));
+      });
+    },
+    [addToQueue]
+  );
 
   const handleRemoveImage = useCallback((id: string) => {
     setImages((prev) => {
-      const image = prev.find(img => img.id === id);
+      const image = prev.find((img) => img.id === id);
       if (image?.preview) {
         URL.revokeObjectURL(image.preview);
       }
-      return prev.filter(img => img.id !== id);
+      return prev.filter((img) => img.id !== id);
     });
   }, []);
 
   const handleClearAll = useCallback(() => {
-    images.forEach(image => {
+    images.forEach((image) => {
       if (image.preview) {
         URL.revokeObjectURL(image.preview);
       }
@@ -70,7 +82,27 @@ export function App() {
     }
   }, [images]);
 
-  const completedImages = images.filter(img => img.status === 'complete').length;
+  const handleDownloadAllAsZip = useCallback(async () => {
+    const completedImages = images.filter((img) => img.status === "complete");
+
+    // Create a new zip instance
+    const zip = new JSZip();
+
+    for (const image of completedImages) {
+      if (image.blob && image.outputType) {
+        const fileName = `${image.file.name.split(".")[0]}.${image.outputType}`;
+        zip.file(fileName, image.blob);
+      }
+    }
+
+    zip.generateAsync({ type: "blob" }).then((content) => {
+      saveAs(content, "images.zip");
+    });
+  }, [images]);
+
+  const completedImages = images.filter(
+    (img) => img.status === "complete"
+  ).length;
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -96,7 +128,10 @@ export function App() {
           <DropZone onFilesDrop={handleFilesDrop} />
 
           {completedImages > 0 && (
-            <DownloadAll onDownloadAll={handleDownloadAll} count={completedImages} />
+            <div className="flex flex-col md:flex-row gap-2">
+              <DownloadAll onDownloadAll={handleDownloadAll} count={completedImages} />
+              <DownloadZip onDownloadAll={handleDownloadAllAsZip}  />
+            </div>
           )}
 
           <ImageList 

src/components/DownloadZip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Download, FolderArchive ,} from 'lucide-react';
+
+interface DownloadZipProps {
+  onDownloadAll: () => void;
+}
+
+export function DownloadZip({ onDownloadAll }: DownloadZipProps) {
+  return (
+    <button
+      onClick={onDownloadAll}
+      className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+    >
+      <Download className="w-5 h-5" />
+      Download Zip
+      <FolderArchive className="w-5 h-5"/>
+    </button>
+  );
+}