Attachment list

"use client";
import * as React from "react";
import { type Attachment, AttachmentList } from "@/components/ui/notchset/blocks/attachment-list";

export default function AttachmentListDemo() {
  const [files, setFiles] = React.useState<Attachment[]>([
    { id: "f1", name: "overrun-trace-40-stops.csv", size: 48200, state: "stored", note: "Added by Hana" },
    { id: "f2", name: "late-text-copy.png", size: 182400, state: "uploading", progress: 64 },
    { id: "f3", name: "route-export.json", size: 9100, state: "failed" },
  ]);
  return (
    <div className="w-full max-w-[560px]">
      <AttachmentList
        files={files}
        localNote="this demo has no file storage"
        onAdd={(fs) => setFiles((x) => [...x, ...fs.map((f, i) => ({ id: `n${x.length + i}`, name: f.name, size: f.size, state: "local" as const }))])}
        onRemove={(id) => setFiles((x) => x.filter((f) => f.id !== id))}
      />
    </div>
  );
}