{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-sentences",
  "type": "registry:component",
  "title": "Flip Sentences",
  "author": "Rajdeep Singh <rajdeepsingh10789@gmail.com>",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@rajdeep/utils"
  ],
  "files": [
    {
      "path": "src/registry/flip-sentences/flip-sentences.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport function FlipSentences({\n  className,\n  sentences,\n}: {\n  className?: string;\n  sentences: string[];\n}) {\n  const [currentSentence, setCurrentSentence] = useState(0);\n\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const startAnimation = () => {\n    intervalRef.current = setInterval(() => {\n      setCurrentSentence((prev) => (prev + 1) % sentences.length);\n    }, 2500);\n  };\n\n  useEffect(() => {\n    startAnimation();\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    document.addEventListener(\n      \"visibilitychange\",\n      () => {\n        if (document.visibilityState !== \"visible\" && intervalRef.current) {\n          clearInterval(intervalRef.current); // Clear the interval when the tab is not visible\n          intervalRef.current = null;\n        } else if (document.visibilityState === \"visible\") {\n          setCurrentSentence((prev) => (prev + 1) % sentences.length); // Show the next sentence immediately\n          startAnimation(); // Restart the interval when the tab becomes visible\n        }\n      },\n      { signal }\n    );\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n      abortController.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sentences]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <motion.p\n        key={`current-sentence-${currentSentence}`}\n        className={cn(\n          \"font-mono text-sm text-balance text-muted-foreground select-none\",\n          className\n        )}\n        initial={{\n          y: 8,\n          opacity: 0,\n        }}\n        animate={{\n          y: 0,\n          opacity: 1,\n        }}\n        exit={{\n          y: -8,\n          opacity: 0,\n        }}\n        transition={{\n          duration: 0.3,\n          ease: \"linear\",\n        }}\n      >\n        {sentences[currentSentence]}\n      </motion.p>\n    </AnimatePresence>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}