{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-intersection-observer-demo",
  "title": "UseIntersectionObserverDemo",
  "description": "use-intersection-observer's hook in action.",
  "registryDependencies": [
    "card",
    "button",
    "https://guarahooks.com/r/use-intersection-observer.json"
  ],
  "files": [
    {
      "path": "registry/example/use-intersection-observer-demo.tsx",
      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\n\nimport { useIntersectionObserver } from '@/hooks/guarahooks/use-intersection-observer';\n\nexport function UseIntersectionObserverDemo() {\n  const targetRef = useRef<HTMLDivElement | null>(null);\n  const { ref, entry, isIntersecting } =\n    useIntersectionObserver<HTMLDivElement>({\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.1,\n    });\n\n  return (\n    <Card className=\"max-w-md w-full\">\n      <CardHeader>\n        <CardTitle>Intersection Observer Demo</CardTitle>\n        <CardDescription>\n          Observe when the box enters/exits the viewport.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div\n          ref={(node) => {\n            targetRef.current = node;\n            ref(node);\n          }}\n          className=\"h-48 border-2 rounded-lg flex items-center justify-center\"\n        >\n          {isIntersecting ? 'Visible' : 'Not Visible'}\n        </div>\n        <div>\n          <p>Intersection Ratio: {entry?.intersectionRatio.toFixed(2)}</p>\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button variant=\"outline\" onClick={() => ref(null)}>\n          Reset Observer\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-intersection-observer-demo.tsx"
    }
  ],
  "type": "registry:example"
}