{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar-block",
  "type": "registry:block",
  "title": "Progress Bar Block",
  "description": "A demo block showing a horizontal progress bar with animated progress.",
  "registryDependencies": [
    "https://edgestore.dev/r/progress-bar.json"
  ],
  "files": [
    {
      "path": "examples/components/src/components/upload/blocks/progress-bar-block.tsx",
      "content": "import * as React from 'react';\nimport { ProgressBar } from '../progress-bar';\n\nexport function ProgressBarUsage() {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const startAnimation = () => {\n      const interval = setInterval(() => {\n        setProgress((prevProgress) => {\n          if (prevProgress >= 100) {\n            clearInterval(interval);\n            // Reset after 1 second when reaching 100%\n            setTimeout(() => {\n              setProgress(0);\n              startAnimation(); // Restart the animation cycle\n            }, 1000);\n            return 100;\n          }\n          // Add a random value between 10-20 percent\n          return Math.min(\n            100,\n            prevProgress + Math.floor(Math.random() * 11) + 10,\n          );\n        });\n      }, 300);\n\n      return interval;\n    };\n\n    const interval = startAnimation();\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex w-full items-center justify-center p-4\">\n      <ProgressBar progress={progress} className=\"w-full max-w-sm\" />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/upload/blocks/progress-bar-block.tsx"
    }
  ]
}