{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-button",
  "title": "live-button",
  "description": "A live button component.",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "registry/eldoraui/live-button.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\n\ninterface LiveButtonProps {\n  text: string\n  url: string\n  className?: string\n}\n\nexport default function LiveButton({\n  text,\n  url,\n  className = \"\",\n}: LiveButtonProps) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isPressed, setIsPressed] = useState(false)\n\n  return (\n    <button\n      className={`group relative flex h-12 min-w-[9.3rem] items-center justify-center gap-3 overflow-hidden rounded-lg border border-gray-300 bg-white px-6 transition-all duration-500 ease-out before:absolute before:inset-0 before:translate-x-[-100%] before:bg-gradient-to-r before:from-transparent before:via-black/5 before:to-transparent before:transition-transform before:duration-700 hover:scale-105 hover:border-gray-400 hover:shadow-lg hover:shadow-black/20 hover:before:translate-x-[100%] active:scale-95 dark:border-gray-600 dark:bg-black dark:before:via-white/5 dark:hover:border-gray-500 dark:hover:shadow-white/20 ${className}`}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => {\n        setIsHovered(false)\n        setIsPressed(false)\n      }}\n      onMouseDown={() => setIsPressed(true)}\n      onMouseUp={() => setIsPressed(false)}\n      onClick={() => (window.location.href = url)}\n    >\n      {/* Subtle glow effect */}\n      <div className=\"absolute inset-0 rounded-lg bg-gradient-to-r from-cyan-200/0 via-cyan-200/10 to-cyan-200/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-cyan-200/0 dark:via-cyan-200/10 dark:to-cyan-200/0\"></div>\n\n      {/* Text */}\n      <span className=\"relative z-10 text-sm font-medium tracking-wide whitespace-nowrap text-black transition-all duration-300 group-hover:text-cyan-600 dark:text-white dark:group-hover:text-cyan-50\">\n        {text}\n      </span>\n\n      {/* Animated dot */}\n      <span\n        className={`relative z-10 h-3 w-3 rounded-full bg-cyan-400 transition-all duration-500 ease-out ${isHovered ? \"scale-125 bg-cyan-300 shadow-lg shadow-cyan-300/50\" : \"\"} ${isPressed ? \"scale-90\" : \"\"} before:absolute before:inset-0 before:animate-pulse before:rounded-full before:bg-cyan-200 before:opacity-0 group-hover:before:opacity-50`}\n      >\n        {/* Ripple effect */}\n        <div\n          className=\"absolute inset-0 animate-ping rounded-full bg-cyan-400 opacity-0 group-hover:opacity-60\"\n          style={{ animationDuration: \"2s\" }}\n        ></div>\n      </span>\n\n      {/* Hover state border animation */}\n      <div className=\"absolute inset-0 animate-pulse rounded-lg border-2 border-cyan-200/0 opacity-0 transition-all duration-500 group-hover:border-cyan-500/30 group-hover:opacity-100 dark:group-hover:border-cyan-200/30\"></div>\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}