45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
Label,
|
|
} from "@/ui";
|
|
import { UseDownloader } from "react-use-downloader/dist/types";
|
|
|
|
export const DownloadDialog = (props: Omit<UseDownloader, "download">) => {
|
|
const { size, elapsed, percentage, cancel, error, isInProgress } = props;
|
|
|
|
return (
|
|
<Dialog defaultOpen>
|
|
<DialogContent className='sm:max-w-md'>
|
|
<DialogHeader>
|
|
<DialogTitle>Share link</DialogTitle>
|
|
<DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>
|
|
</DialogHeader>
|
|
<div>
|
|
<p>Download is in {isInProgress ? "in progress" : "stopped"}</p>
|
|
|
|
<button onClick={() => cancel()}>Cancel the download</button>
|
|
<p>Download size in bytes {size}</p>
|
|
<Label>Downloading progress:</Label>
|
|
<progress id='file' value={percentage} max='100' />
|
|
<p>Elapsed time in seconds {elapsed}</p>
|
|
{error && <p>possible error {JSON.stringify(error)}</p>}
|
|
</div>
|
|
<DialogFooter className='sm:justify-start'>
|
|
<DialogClose asChild>
|
|
<Button type='button' variant='secondary'>
|
|
Close
|
|
</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|