Download A File From Storage

1'use client';
2 
3import { Download } from 'lucide-react';
4import type { PropsWithChildren } from 'react';
5import { cn } from '@/lib/utils';
6import { useDownloadFile } from '@/registry/default/storage/use-download-file';
7 
8type DownloadFileProps = PropsWithChildren<{
9  fileKey: string;
10  fileName?: string;
11  className?: string;
12}>;
13 
14export function DownloadFile({
15  fileKey,
16  fileName,
17  children,
18  className,
19}: DownloadFileProps) {
20  const downloadFile = useDownloadFile();
21 
22  const handleDownload = () => {
23    downloadFile.mutate(
24      { fileKey, fileName },
25      {
26        onSuccess: (url: string) => {
27          console.log('Download initiated:', url);
28        },
29        onError: (err: Error) => {
30          console.error(`Download failed: ${(err as Error).message}`);
31        },
32      },
33    );
34  };
35 
36  return (
37    <button
38      className={cn('flex items-center gap-2', className)}
39      disabled={downloadFile.isPending}
40      onClick={handleDownload}
41      type="button"
42    >
43      {children || (
44        <>
45          <Download className="mr-2 h-4 w-4" />
46          {downloadFile.isPending ? 'Downloading...' : 'Download'}
47        </>
48      )}
49    </button>
50  );
51}