69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
|
import { ArrowDownToLine, LoaderCircle } from "lucide-react";
|
||
|
|
import { useState, type MouseEvent } from "react";
|
||
|
|
import { useI18n } from "../../i18n";
|
||
|
|
import type { Attachment } from "../../types/post";
|
||
|
|
import { downloadAttachment } from "./utils/downloadFile";
|
||
|
|
import { formatBytes } from "./utils/formatBytes";
|
||
|
|
|
||
|
|
type AttachmentDownloadPillProps = {
|
||
|
|
postId: string;
|
||
|
|
attachment: Attachment;
|
||
|
|
leadingLabel?: string;
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function AttachmentDownloadPill({
|
||
|
|
postId,
|
||
|
|
attachment,
|
||
|
|
leadingLabel,
|
||
|
|
className = "absolute left-2 top-2",
|
||
|
|
}: AttachmentDownloadPillProps) {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const [isDownloading, setIsDownloading] = useState(false);
|
||
|
|
|
||
|
|
const handleDownload = (e: MouseEvent<HTMLButtonElement>) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
if (isDownloading) return;
|
||
|
|
setIsDownloading(true);
|
||
|
|
void downloadAttachment(postId, attachment.id, attachment.filename)
|
||
|
|
.finally(() => setIsDownloading(false))
|
||
|
|
.catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleDownload}
|
||
|
|
disabled={isDownloading}
|
||
|
|
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-[10px] text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait ${className}`}
|
||
|
|
aria-label={
|
||
|
|
isDownloading ? t("downloading") : `Download ${attachment.filename}`
|
||
|
|
}
|
||
|
|
aria-busy={isDownloading}
|
||
|
|
>
|
||
|
|
<span className="flex h-6 w-6 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
|
||
|
|
{isDownloading ? (
|
||
|
|
<LoaderCircle className="h-3 w-3 animate-spin" strokeWidth={2.3} />
|
||
|
|
) : (
|
||
|
|
<ArrowDownToLine className="h-3 w-3" strokeWidth={2.3} />
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
<span className="flex h-6 items-center gap-0.5 px-1.5">
|
||
|
|
{isDownloading ? (
|
||
|
|
t("downloading")
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{leadingLabel ? (
|
||
|
|
<>
|
||
|
|
<span>{leadingLabel}</span>
|
||
|
|
<span className="opacity-60">·</span>
|
||
|
|
</>
|
||
|
|
) : null}
|
||
|
|
<span>{formatBytes(attachment.sizeBytes)}</span>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|