{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-circle-block",
  "type": "registry:block",
  "title": "Progress Circle Block",
  "description": "A demo block showing a circular progress indicator with animated progress.",
  "registryDependencies": [
    "https://edgestore.dev/r/progress-circle.json"
  ],
  "files": [
    {
      "path": "examples/components/src/components/upload/blocks/progress-circle-block.tsx",
      "content": "import * as React from 'react';\nimport { ProgressCircle } from '../progress-circle';\n\nexport function ProgressCircleUsage() {\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      <div className=\"flex h-20 w-20 items-center justify-center rounded-md bg-black/80\">\n        <ProgressCircle progress={progress} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/upload/blocks/progress-circle-block.tsx"
    }
  ]
}