Capabilities Badges

1"use client";
2 
3import type { AdapterCapabilities } from "files-sdk";
4import type { UseFilesResult } from "files-sdk/react";
5import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
6import { useEffect, useRef, useState } from "react";
7 
8import { Badge } from "@/components/ui/badge";
9import { cn } from "@/lib/utils";
10 
11export interface CapabilitiesBadgesProps {
12  /** A `useFiles()` instance — capabilities are read through it. */
13  files: UseFilesResult;
14  /** Hide capabilities the adapter does not support instead of dimming them. */
15  supportedOnly?: boolean;
16  className?: string;
17}
18 
19/** Render a seconds duration as a compact `7d` / `4h` / `30m` label. */
20const formatDuration = (seconds: number): string => {
21  const units: [number, string][] = [
22    [86_400, "d"],
23    [3600, "h"],
24    [60, "m"],
25  ];
26  for (const [size, suffix] of units) {
27    if (seconds % size === 0 || seconds >= size) {
28      return `${Math.round(seconds / size)}${suffix}`;
29    }
30  }
31  return `${seconds}s`;
32};
33 
34const describe = (
35  caps: AdapterCapabilities
36): { label: string; supported: boolean }[] => [
37  { label: "Folder listing", supported: caps.delimiter },
38  {
39    label: caps.signedUrl.maxExpiresIn
40      ? `Signed URLs (max ${formatDuration(caps.signedUrl.maxExpiresIn)})`
41      : "Signed URLs",
42    supported: caps.signedUrl.supported,
43  },
44  { label: "Range reads", supported: caps.rangeRead },
45  { label: "Multipart uploads", supported: caps.multipart },
46  { label: "Upload progress", supported: caps.uploadProgress },
47  { label: "Server-side copy", supported: caps.serverSideCopy },
48  { label: "Custom metadata", supported: caps.metadata },
49  { label: "Cache-Control", supported: caps.cacheControl },
50];
51 
52/**
53 * Reads `capabilities()` and renders each adapter feature as a badge — a
54 * supported check or an unsupported cross. Useful for surfacing what the
55 * configured storage backend can do, and a building block for gating actions
56 * (hide a "share link" button when `Signed URLs` is unsupported, etc.).
57 */
58export const CapabilitiesBadges = ({
59  files,
60  supportedOnly = false,
61  className,
62}: CapabilitiesBadgesProps) => {
63  const [caps, setCaps] = useState<AdapterCapabilities>();
64  const [isLoading, setIsLoading] = useState(true);
65 
66  const filesRef = useRef(files);
67  filesRef.current = files;
68 
69  useEffect(() => {
70    let cancelled = false;
71    const run = async () => {
72      setIsLoading(true);
73      try {
74        const result = await filesRef.current.capabilities();
75// … truncated