Untitled
unknown
plain_text
2 months ago
3.2 kB
3
Indexable
// components/download-all.tsx import { useState } from "react"; import { Download } from "lucide-react"; import { motion } from "framer-motion"; import { useParams } from "next/navigation"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; export function DownloadAll() { const [isDownloading, setIsDownloading] = useState(false); const [progress, setProgress] = useState(0); const params = useParams(); const clientId = params.clientId as string; const handleDownloadAll = async () => { try { setIsDownloading(true); setProgress(20); // Direct URL to the pre-generated ZIP file const zipUrl = `${process.env.NEXT_PUBLIC_R2_PUBLIC_URL}/${clientId}/images.zip`; toast.info("Download wird vorbereitet", { description: "Bitte warten Sie, während die Datei vorbereitet wird." }); // Start download setProgress(50); // Create a temporary link to download the file const link = document.createElement('a'); link.href = zipUrl; link.download = `${clientId}-fotos.zip`; // Append to the document and click document.body.appendChild(link); link.click(); // Cleanup the link document.body.removeChild(link); setProgress(100); toast.success("Download gestartet", { description: "Die Datei wird jetzt heruntergeladen." }); // Reset after a delay setTimeout(() => { setIsDownloading(false); setProgress(0); }, 3000); } catch (error) { console.error("Download failed:", error); setIsDownloading(false); setProgress(0); toast.error("Download fehlgeschlagen", { description: "Bitte versuchen Sie es später erneut." }); } }; return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-12 rounded-lg border bg-card p-4 text-card-foreground shadow-sm" > <div className="flex flex-col items-center gap-4 text-center sm:flex-row sm:justify-between sm:text-left"> <div> <h2 className="text-lg font-semibold">Alle Fotos herunterladen</h2> <p className="text-sm text-muted-foreground hidden sm:block"> Erhalten Sie alle Fotos in Originalqualität in einer einzigen Datei </p> </div> <div className="flex flex-col gap-2 min-w-[200px]"> {isDownloading ? ( <div className="space-y-2"> <Progress value={progress} className="w-full" /> <p className="text-sm text-muted-foreground text-center"> {progress === 100 ? "Download gestartet!" : "Download wird vorbereitet..."} </p> </div> ) : ( <Button size="lg" onClick={handleDownloadAll}> <Download className="mr-2 h-4 w-4" /> Alle herunterladen </Button> )} </div> </div> </motion.div> ); } export default DownloadAll;
Editor is loading...
Leave a Comment