{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "x-card-interactive-demo",
  "registryDependencies": [
    "@delta/x-card"
  ],
  "files": [
    {
      "path": "examples/x-card-interactive-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { XCard } from \"@/components/ui/x-card\"\n\nconst tweetIds = [\n  \"1519480761749016577\",\n  \"896523232098078720\",\n  \"1006238175247794176\",\n  \"1942735295432077552\",\n  \"1984647955840975189\",\n]\n\nexport default function XInteractiveDemo() {\n  const [currentIndex, setCurrentIndex] = React.useState(0)\n  const [key, setKey] = React.useState(0)\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentIndex((prevIndex) => (prevIndex + 1) % tweetIds.length)\n      setKey((prevKey) => prevKey + 1) // Force re-render of XCard\n    }, 5000) // Change every 5 seconds to allow loading\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <div className=\"flex h-full w-full items-center justify-center py-8\">\n      <XCard key={key} id={tweetIds[currentIndex]} size=\"default\" />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}