{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "direct-image-upload-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/single-image-upload",
    "https://reusables.vercel.app/r/notify"
  ],
  "files": [
    {
      "path": "registry/example/direct-image-upload-demo.tsx",
      "content": "\"use client\"\n\nimport { toast } from \"@/packages/notify/src\"\n\nimport { useFileUpload } from \"@/hooks/use-file-upload\"\n\nimport { SingleImageDropzone } from \"@/components/single-image-upload\"\n\nexport default function DirectImageUploadDemo() {\n  const autoUpload = useFileUpload({\n    onSuccess: () => toast.success(\"Upload Successful!\"),\n    onError: (error) => toast.error(error),\n  })\n\n  return (\n    <div className=\"w-full space-y-4 px-5 py-12 md:px-7 md:py-0\">\n      <SingleImageDropzone\n        width={\"100%\"}\n        height={\"300px\"}\n        directUpload={true}\n        progress={autoUpload.progress}\n        disabled={autoUpload.isUploading}\n        dropzoneOptions={{\n          maxSize: 2 * 1024 * 1024,\n        }}\n        onChange={async (file) => {\n          if (file) {\n            try {\n              await autoUpload.handleFileUpload(file)\n            } catch (error) {\n              console.error(\"Upload error:\", error)\n            }\n          }\n        }}\n      />\n\n      {autoUpload.error && (\n        <p className=\"text-red-500\">Error: {autoUpload.error}</p>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/direct-image-upload-demo.tsx"
    }
  ],
  "type": "registry:example"
}