{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-scroll-demo",
  "title": "Infinite Scroll Demo",
  "description": "Demo showing infinite scroll component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/infinite-scroll"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/infinite-scroll/index.tsx",
      "content": "'use client';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport {\n  InfiniteScroll,\n  InfiniteScrollCell,\n} from '@/components/systaliko-ui/ecommerce/infinite-scroll';\nimport { useEffect, useCallback, useState } from 'react';\n\ninterface Post {\n  id: number;\n  userId: number;\n  title: string;\n  body: string;\n}\n\nfunction CardSkelton() {\n  return (\n    <div className=\"flex flex-col space-y-6\">\n      <div className=\"flex items-center gap-2\">\n        <Skeleton className=\"size-8 rounded-full\" />\n        <Skeleton className=\"w-full h-6 rounded\" />\n      </div>\n      <Skeleton className=\"w-full h-24 rounded\" />\n    </div>\n  );\n}\nexport function InfiniteScrollDemo() {\n  const BASE_URL = 'https://jsonplaceholder.typicode.com/posts';\n  const LIMIT = 6;\n\n  const [posts, setPosts] = useState<Post[]>([]);\n  const [page, setPage] = useState<number>(0);\n  const [totalCount, setTotalCount] = useState<number | null>();\n  const [isPending, setIsPending] = useState<boolean>(false);\n\n  const fetchData = useCallback(async () => {\n    if (isPending) return;\n\n    setIsPending(true);\n    const start = page * LIMIT;\n\n    try {\n      const response = await fetch(\n        `${BASE_URL}?_start=${start}&_limit=${LIMIT}`,\n      );\n      const totalItems = response.headers.get('x-total-count');\n      const data = await response.json();\n\n      setTotalCount(Number(totalItems));\n      setPosts((prevPosts) => [...prevPosts, ...data]);\n      setPage((prevPage) => prevPage + 1);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setIsPending(false);\n    }\n  }, [page, isPending]);\n\n  useEffect(() => {\n    fetchData();\n  }, []);\n  return (\n    <InfiniteScroll\n      isPending={isPending}\n      currentItemsLength={posts.length}\n      allItemsCount={totalCount}\n      loadMore={fetchData}\n      className=\"grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] justify-center items-start gap-4 p-8\"\n    >\n      {posts.map((post) => (\n        <InfiniteScrollCell\n          className=\"p-6 bg-card border border-border/50 rounded-xl shadow-2xs\"\n          key={post.id}\n          amount={0}\n          skelton={<CardSkelton />}\n        >\n          <div className=\"flex flex-col space-y-6 \">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"font-semibold text-sm text-muted-foreground\">\n                #{post.id}\n              </div>\n              <h2\n                title={post.title}\n                className=\"font-medium max-w-[15ch] capitalize line-clamp-1\"\n              >\n                {post.title}\n              </h2>\n            </div>\n            <p className=\"text-sm text-muted-foreground\">{post.body}</p>\n          </div>\n        </InfiniteScrollCell>\n      ))}\n    </InfiniteScroll>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/infinite-scroll.tsx"
    }
  ],
  "type": "registry:block"
}