{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-scroll-demo",
  "title": "Infinite Scroll Demo",
  "description": "component for the Infinite Scroll Demo",
  "registryDependencies": [
    "@spectrumui/infinite-scroll-dependecies"
  ],
  "files": [
    {
      "path": "app/registry/infinite-scroll/infinite-scroll-demo.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport InfiniteScroll from \"@/components/ui/infinite-scroll\";\nimport { Loader2 } from \"lucide-react\";\n\ninterface DummyProductResponse {\n  products: DummyProduct[];\n  total: number;\n  skip: number;\n  limit: number;\n}\n\ninterface DummyProduct {\n  id: number;\n  title: string;\n  price: string;\n}\n\nconst Product = ({ product }: { product: DummyProduct }) => {\n  return (\n    <div className=\"flex w-full flex-col gap-2 rounded-lg border-2 border-gray-200 p-2\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex flex-col justify-center gap-1\">\n          <div className=\"font-bold text-primary\">\n            {product.id} - {product.title}\n          </div>\n          <div className=\"text-sm text-muted-foreground\">{product.price}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst InfiniteScrollDemo = () => {\n  const [page, setPage] = React.useState(0);\n  const [loading, setLoading] = React.useState(false);\n  const [hasMore, setHasMore] = React.useState(true);\n  const [products, setProducts] = React.useState<DummyProduct[]>([]);\n\n  const next = async () => {\n    setLoading(true);\n\n    /**\n     * Intentionally delay the search by 800ms before execution so that you can see the loading spinner.\n     * In your app, you can remove this setTimeout.\n     **/\n    setTimeout(async () => {\n      const res = await fetch(\n        `https://dummyjson.com/products?limit=3&skip=${3 * page}&select=title,price`,\n      );\n      const data = (await res.json()) as DummyProductResponse;\n      setProducts((prev) => [...prev, ...data.products]);\n      setPage((prev) => prev + 1);\n\n      // Usually your response will tell you if there is no more data.\n      if (data.products.length < 3) {\n        setHasMore(false);\n      }\n      setLoading(false);\n    }, 800);\n  };\n  return (\n    <div className=\"max-h-[300px] w-full  overflow-y-auto px-10\">\n      <div className=\"flex w-full flex-col items-center  gap-3\">\n        {products.map((product) => (\n          <Product key={product.id} product={product} />\n        ))}\n        <InfiniteScroll\n          hasMore={hasMore}\n          isLoading={loading}\n          next={next}\n          threshold={1}\n        >\n          {hasMore && <Loader2 className=\"my-4 h-8 w-8 animate-spin\" />}\n        </InfiniteScroll>\n      </div>\n    </div>\n  );\n};\n\nexport default InfiniteScrollDemo;\n",
      "type": "registry:component",
      "target": "components/spectrumui/infinite-scroll.tsx"
    }
  ],
  "type": "registry:component"
}