{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-upload-05",
  "type": "registry:block",
  "title": "File Upload with Progress",
  "description": "A file upload with progress block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "label"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/file-upload/file-upload-05.tsx",
      "type": "registry:component",
      "target": "components/file-upload-05.tsx",
      "content": "import { FileSpreadsheet, Upload, X } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Label } from '@/components/ui/label';\n\nexport default function FileUpload05() {\n  return (\n    <div className=\"flex w-full max-w-lg items-center justify-center p-10 sm:mx-auto sm:max-w-lg\">\n      <form>\n        <h3 className=\"text-balance font-semibold text-foreground text-lg\">\n          File Upload\n        </h3>\n        <div className=\"mt-4 flex justify-center space-x-4 rounded-md border border-input border-dashed px-6 py-10\">\n          <div className=\"sm:flex sm:items-center sm:gap-x-3\">\n            <Upload\n              aria-hidden={true}\n              className=\"mx-auto h-8 w-8 text-muted-foreground sm:mx-0 sm:h-6 sm:w-6\"\n            />\n            <div className=\"mt-4 flex text-foreground text-sm leading-6 sm:mt-0\">\n              <p>Drag and drop or</p>\n              <Label\n                className=\"relative cursor-pointer rounded-sm pl-1 font-medium text-primary hover:underline hover:underline-offset-4\"\n                htmlFor=\"file-upload-4\"\n              >\n                <span>choose file</span>\n                <input\n                  className=\"sr-only\"\n                  id=\"file-upload-4\"\n                  name=\"file-upload-4\"\n                  type=\"file\"\n                />\n              </Label>\n              <p className=\"text-pretty pl-1\">to upload</p>\n            </div>\n          </div>\n        </div>\n        <p className=\"mt-2 flex items-center justify-between text-pretty text-muted-foreground text-xs leading-5\">\n          Recommended max. size: 10 MB, Accepted file types: XLSX, XLS, CSV.\n        </p>\n        <div className=\"relative mt-8 rounded-lg bg-muted p-3\">\n          <div className=\"absolute top-1 right-1\">\n            <Button\n              aria-label=\"Remove\"\n              className=\"rounded-sm p-2 text-muted-foreground hover:text-foreground\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <X aria-hidden={true} className=\"size-4 shrink-0\" />\n            </Button>\n          </div>\n          <div className=\"flex items-center space-x-2.5\">\n            <span className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-background shadow-sm ring-1 ring-input ring-inset\">\n              <FileSpreadsheet\n                aria-hidden={true}\n                className=\"size-5 text-foreground\"\n              />\n            </span>\n            <div className=\"w-full\">\n              <p className=\"text-pretty font-medium text-foreground text-xs\">\n                Revenue_Q1_2024.xlsx\n              </p>\n              <p className=\"mt-0.5 flex justify-between text-pretty text-muted-foreground text-xs\">\n                <span>3.1 MB</span>\n                <span>Completed</span>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-8 flex items-center justify-end space-x-3\">\n          <Button\n            className=\"whitespace-nowrap rounded-sm border border-input px-4 py-2 font-medium text-foreground text-sm shadow-sm hover:bg-accent hover:text-foreground\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Cancel\n          </Button>\n          <Button\n            className=\"whitespace-nowrap rounded-sm bg-primary px-4 py-2 font-medium text-primary-foreground text-sm shadow-sm hover:bg-primary/90\"\n            type=\"submit\"\n            variant=\"default\"\n          >\n            Upload\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "file-upload"
  ]
}