{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "universal-file-upload-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/universal-file-upload",
    "https://reusables.vercel.app/r/notify",
    "button"
  ],
  "files": [
    {
      "path": "registry/example/universal-file-upload-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\n\nimport { useMultipleFileUpload } from \"@/hooks/use-multiple-file-upload\"\nimport { Button } from \"@/components/ui/button\"\n\nimport {\n  UniversalFileUpload,\n  type FileState,\n} from \"@/components/universal-file-upload\"\n\nexport default function UniversalFileUploadDemo() {\n  const [fileStates, setFileStates] = useState<FileState[]>([])\n  const {\n    uploadMultipleFiles,\n    uploadProgress,\n    isUploading,\n    error,\n    uploadResults,\n  } = useMultipleFileUpload({\n    onSuccess: (urls) => {\n      // Update file states with uploaded URLs\n      setFileStates((prev) =>\n        prev.map((file, index) => ({\n          ...file,\n          file: urls[index] || file.file,\n          progress: \"COMPLETE\",\n        }))\n      )\n    },\n    onError: (error) => {\n      console.error(\"Upload error:\", error)\n    },\n  })\n\n  // Update progress states\n  React.useEffect(() => {\n    if (uploadProgress.length > 0) {\n      setFileStates((prev) =>\n        prev.map((file) => {\n          const progress = uploadProgress.find((p) => p.key === file.key)\n          return progress ? { ...file, progress: progress.progress } : file\n        })\n      )\n    }\n  }, [uploadProgress])\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl space-y-4 md:px-10\">\n      <UniversalFileUpload\n        value={fileStates}\n        onChange={setFileStates}\n        displayMode=\"list\"\n        disabled={isUploading}\n        dropzoneOptions={{\n          maxFiles: 10,\n          maxSize: 1024 * 1024 * 10, // 10MB\n          // Accept any file type\n          accept: undefined,\n        }}\n        onFilesAdded={async (addedFiles) => {\n          setFileStates((prev) => [...prev, ...addedFiles])\n        }}\n      />\n\n      <Button\n        onClick={() => {\n          const pendingFiles = fileStates\n            .filter(\n              (fileState) =>\n                fileState.progress === \"PENDING\" &&\n                typeof fileState.file !== \"string\"\n            )\n            .map((fileState) => ({\n              key: fileState.key,\n              file: fileState.file as File,\n            }))\n\n          uploadMultipleFiles(pendingFiles)\n        }}\n        disabled={\n          isUploading ||\n          !fileStates.filter((fileState) => fileState.progress === \"PENDING\")\n            .length\n        }\n      >\n        {isUploading ? \"Uploading...\" : \"Upload Files\"}\n      </Button>\n      {error && <div className=\"mt-2 text-sm text-red-500\">{error}</div>}\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/universal-file-upload-demo.tsx"
    }
  ],
  "type": "registry:example"
}