{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-progress-5","type":"registry:block","title":"File upload list with progress & status.","description":"File upload list with progress & status.","dependencies":[],"registryDependencies":["item","progress"],"files":[{"path":"c-progress-5.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst files = [\n  { id: \"1\", name: \"document.pdf\", progress: 45, status: \"2m 30s\" },\n  { id: \"2\", name: \"presentation.pptx\", progress: 78, status: \"45s\" },\n  { id: \"3\", name: \"spreadsheet.xlsx\", progress: 12, status: \"5m 12s\" },\n  { id: \"4\", name: \"image.jpg\", progress: 100, status: \"Complete\" },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-xs flex-col\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileEmpty02Icon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"text-muted-foreground size-4\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"flex-1 truncate\">\n              <ItemTitle className=\"cursor-pointer truncate hover:underline\">\n                {file.name}\n              </ItemTitle>\n            </ItemContent>\n            <ItemContent className=\"w-32\">\n              <Progress\n                value={file.progress}\n                className=\"**:data-[slot=progress-track]:h-1\"\n              />\n            </ItemContent>\n            <ItemActions className=\"w-20 justify-end\">\n              <span className=\"text-foreground\">{file.status}</span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  )\n}","target":"components/examples/c-progress-5.tsx"}],"meta":{"order":5}}