{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typewriter",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/typewriter.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\ninterface TypewriterProps {\n  words?: string[]\n  speed?: number\n  delayBetweenWords?: number\n  cursor?: boolean\n  cursorChar?: string\n  className?: string\n}\n\nexport function Typewriter({\n  words = [],\n  speed = 100,\n  delayBetweenWords = 2000,\n  cursor = true,\n  cursorChar = \"|\",\n  className = \"\",\n}: TypewriterProps) {\n  const [displayText, setDisplayText] = useState(\"\")\n  const [isDeleting, setIsDeleting] = useState(false)\n  const [wordIndex, setWordIndex] = useState(0)\n  const [charIndex, setCharIndex] = useState(0)\n  const [showCursor, setShowCursor] = useState(true)\n\n  const currentWord = words[wordIndex]\n\n  useEffect(() => {\n    const timeout = setTimeout(\n      () => {\n        // Typing logic\n        if (!isDeleting) {\n          //@ts-ignore\n          if (charIndex < currentWord.length) {\n            //@ts-ignore\n            setDisplayText(currentWord.substring(0, charIndex + 1))\n            setCharIndex(charIndex + 1)\n          } else {\n            // Word is complete, wait before deleting\n            setTimeout(() => {\n              setIsDeleting(true)\n            }, delayBetweenWords)\n          }\n        } else {\n          // Deleting logic\n          if (charIndex > 0) {\n            //@ts-ignore\n            setDisplayText(currentWord.substring(0, charIndex - 1))\n            setCharIndex(charIndex - 1)\n          } else {\n            // Word is deleted, move to next word\n            setIsDeleting(false)\n            setWordIndex((prev) => (prev + 1) % words.length)\n          }\n        }\n      },\n      isDeleting ? speed / 2 : speed\n    )\n\n    return () => clearTimeout(timeout)\n  }, [\n    charIndex,\n    currentWord,\n    isDeleting,\n    speed,\n    delayBetweenWords,\n    wordIndex,\n    words,\n  ])\n\n  // Cursor blinking effect\n  useEffect(() => {\n    if (!cursor) return\n\n    const cursorInterval = setInterval(() => {\n      setShowCursor((prev) => !prev)\n    }, 500)\n\n    return () => clearInterval(cursorInterval)\n  }, [cursor])\n\n  return (\n    <div className=\"inline-block\">\n      <span className={className}>\n        {displayText}\n        {cursor && (\n          <span\n            className=\"ml-1 transition-opacity duration-75\"\n            style={{ opacity: showCursor ? 1 : 0 }}\n          >\n            {cursorChar}\n          </span>\n        )}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}