live-button

1"use client"
2 
3import React, { useState } from "react"
4 
5interface LiveButtonProps {
6  text: string
7  url: string
8  className?: string
9}
10 
11export default function LiveButton({
12  text,
13  url,
14  className = "",
15}: LiveButtonProps) {
16  const [isHovered, setIsHovered] = useState(false)
17  const [isPressed, setIsPressed] = useState(false)
18 
19  return (
20    <button
21      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}`}
22      onMouseEnter={() => setIsHovered(true)}
23      onMouseLeave={() => {
24        setIsHovered(false)
25        setIsPressed(false)
26      }}
27      onMouseDown={() => setIsPressed(true)}
28      onMouseUp={() => setIsPressed(false)}
29      onClick={() => (window.location.href = url)}
30    >
31      {/* Subtle glow effect */}
32      <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>
33 
34      {/* Text */}
35      <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">
36        {text}
37      </span>
38 
39      {/* Animated dot */}
40      <span
41        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`}
42      >
43        {/* Ripple effect */}
44        <div
45          className="absolute inset-0 animate-ping rounded-full bg-cyan-400 opacity-0 group-hover:opacity-60"
46          style={{ animationDuration: "2s" }}
47        ></div>
48      </span>
49 
50      {/* Hover state border animation */}
51// … truncated