File list

import * as React from "react";
import { DownloadIcon, FileIcon, FileTextIcon, FileArchiveIcon, ImageIcon, FileCodeIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type FileItem = {
  /** File name with its extension. */
  name: string;
  /** Size in bytes. Left out, the row shows the type alone. */
  size?: number;
  /** Where the action points. */
  href: string;
};

type FileListProps = Omit<React.ComponentProps<"ul">, "children"> & {
  files: FileItem[];
  /** Accessible name for the list. */
  label?: string;
};

const ICONS: Record<string, React.ComponentType<React.ComponentProps<"svg">>> = {
  pdf: FileTextIcon,
  md: FileTextIcon,
  txt: FileTextIcon,
  png: ImageIcon,
  jpg: ImageIcon,
  svg: ImageIcon,
  zip: FileArchiveIcon,
  json: FileCodeIcon,
  tsx: FileCodeIcon,
};

/** 1 kB is 1000 bytes. One decimal under 10, none above. Empty when there is no size to show. */
export function formatBytes(bytes?: number) {
  if (bytes === undefined || !Number.isFinite(bytes)) return "";
  if (bytes < 1000) return `${bytes} B`;
  const units = ["kB", "MB", "GB", "TB"];
  let value = bytes;
  let i = -1;
  do {
    value /= 1000;
    i += 1;
  } while (Math.round(value) >= 1000 && i < units.length - 1);
  return `${value < 9.95 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
}

function extensionOf(name: string) {
  const dot = name.lastIndexOf(".");
  return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
}

/**
 * Files as rows: type icon, name, extension and size in mono, and one download action.
 * Rows share hairlines inside one bordered box.
 */
export function FileList({ files, label = "Files", className, ...props }: FileListProps) {
  return (
    <ul
      aria-label={label}
      className={cn(
        "m-0 w-full list-none divide-y divide-border rounded-lg border border-border bg-background p-0",
        className,
      )}
      {...props}
    >
      {files.map((file, i) => {
        const ext = extensionOf(file.name);
        const size = formatBytes(file.size);
        const Icon = ICONS[ext] ?? FileIcon;
        return (
          <li key={i} className="flex items-center gap-3 px-3 py-2">
            <span
              aria-hidden="true"
              className="inline-grid size-8 shrink-0 place-items-center rounded-md bg-muted text-foreground"
            >
              <Icon className="size-4" />
            </span>
            <div className="min-w-0 flex-1">
              <p className="m-0 truncate text-sm text-foreground">{file.name}</p>
              <p className="m-0 font-mono text-xs text-muted-foreground tabular-nums">
                {ext ? ext.toUpperCase() : "FILE"}
                {size && " · "}
                {size}
              </p>
            </div>
            <Button asChild variant="ghost" size="icon-sm" className="rounded-full">
              <a href={file.href} download aria-label={`Download ${file.name}`}>
                <DownloadIcon />
              </a>
            </Button>
          </li>
        );
      })}
    </ul>
  );
}