File list

Pro

The files the work produced: each with its type, size and where it stands ("Checked", "Not yet checked"), Open for the ones the reader can show, and Download, with a menu when it comes in several formats. Files can be grouped ("Result 2", "Sources"). Nothing here is a link: open and download go through your handlers, so a URL from model output never reaches the page.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/file-list

Brings in: attachment-preview, button, dropdown-menu, locale, work, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { FileList } from "@/components/file-list"
import type { Deliverable } from "@/lib/work"

const files: Deliverable[] = [
  { id: "report", group: "Result 2", name: "Pricing review.docx", size: 48_000, state: "Checked", tone: "success", readable: true, formats: [{ id: "docx", label: "Word" }, { id: "pdf", label: "PDF" }] },
  { id: "record", group: "Result 2", name: "What proves it.pdf", size: 210_000, state: "Checked", tone: "success", formats: [{ id: "pdf", label: "PDF" }] },
  { id: "draft", group: "In progress", name: "Section 3 draft", state: "Not yet checked", tone: "attention" },
  { id: "sheet", group: "Sources", name: "revenue-by-plan.csv", mediaType: "text/csv", size: 184_000 },
]

export default function Example() {
  const [said, setSaid] = React.useState("")
  return (
    <div className="flex max-w-md flex-col gap-2">
      <FileList files={files} onOpen={(id) => setSaid(`open ${id}`)} onDownload={(id, format) => setSaid(`download ${id}${format ? ` as ${format}` : ""}`)} />
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {said && `Your app would ${said}.`}
      </p>
    </div>
  )
}

<FileList>

Prop	Type	Default	Description
filesrequired	`Deliverable[]`	—	The files, in order; a file's `group` puts it under that heading, groups in the order first seen.
onOpen	`((id: string) => void) \| undefined`	—	Adds Open to readable files; called with the file's id.
onDownload	`((id: string, format?: string) => void) \| undefined`	—	Adds Download; called with the file's id and the chosen format's id (undefined with no formats).
label	`string \| undefined`	—	The list's accessible name. Defaults to "Files".
empty	`React.ReactNode \| undefined`	—	Shown when there are no files. Defaults to "No files yet."
headingLevel	`2 \| 3 \| 4 \| 5 \| 6 \| undefined`	3	The level of the group headings, to fit the page's outline. Defaults to 3.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under fileList in <LocaleProvider strings={{ … }}>; the table is exported as fileListStrings.

Key	English
label	Files
none	No files yet.
open	Open
openName	Open {name}
download	Download
downloadName	Download {name}
downloadAs	Download {format}
downloadNameAs	Download {name} as {format}