Share Dialog

1"use client";
2 
3import type { AdapterCapabilities } from "files-sdk";
4import type { UseFilesResult } from "files-sdk/react";
5import { CheckIcon, CopyIcon, Link2Icon, Loader2Icon } from "lucide-react";
6import type { ReactNode } from "react";
7import { useCallback, useEffect, useRef, useState } from "react";
8 
9import { Button, buttonVariants } from "@/components/ui/button";
10import {
11  Dialog,
12  DialogContent,
13  DialogDescription,
14  DialogHeader,
15  DialogTitle,
16  DialogTrigger,
17} from "@/components/ui/dialog";
18import { Input } from "@/components/ui/input";
19import { cn } from "@/lib/utils";
20 
21export interface ShareDialogProps {
22  /** A `useFiles()` instance — the link is minted through it. */
23  files: UseFilesResult;
24  /** The key to share. */
25  fileKey: string;
26  /** `"download"` mints a `url()`; `"upload"` mints a `signedUploadUrl()`. Default `"download"`. */
27  mode?: "download" | "upload";
28  /** Initial expiry in seconds. Default `3600` (1 hour). */
29  defaultExpiresIn?: number;
30  /** Custom trigger content, rendered inside the trigger button. Defaults to a styled "Share" label. */
31  children?: ReactNode;
32  className?: string;
33}
34 
35const EXPIRY_PRESETS = [
36  { label: "5 min", seconds: 300 },
37  { label: "1 hour", seconds: 3600 },
38  { label: "1 day", seconds: 86_400 },
39  { label: "7 days", seconds: 604_800 },
40];
41 
42/**
43 * A dialog that mints a shareable link for one key. Download links go through
44 * `url()` (a signed URL where the adapter supports it, otherwise a public one);
45 * upload links go through `signedUploadUrl()`. Pick an expiry, copy the result.
46 */
47export const ShareDialog = ({
48  files,
49  fileKey,
50  mode = "download",
51  defaultExpiresIn = 3600,
52  children,
53  className,
54}: ShareDialogProps) => {
55  const [open, setOpen] = useState(false);
56  const [expiresIn, setExpiresIn] = useState(defaultExpiresIn);
57  const [disposition, setDisposition] = useState<"attachment" | "inline">(
58    "attachment"
59  );
60  const [url, setUrl] = useState<string>();
61  const [isGenerating, setIsGenerating] = useState(false);
62  const [copied, setCopied] = useState(false);
63  const [caps, setCaps] = useState<AdapterCapabilities>();
64 
65  const filesRef = useRef(files);
66  filesRef.current = files;
67 
68  useEffect(() => {
69    if (!open) {
70      return;
71    }
72    let cancelled = false;
73    const run = async () => {
74      try {
75        const result = await filesRef.current.capabilities();
76        if (!cancelled) {
77          setCaps(result);
78        }
79      } catch {
80// … truncated