trustingMacaw4/bedtime-story-generator

1import type React from "react";2import { Loader } from "lucide-react";3 4interface NeoButtonProps {5  children: React.ReactNode;6  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;7  playPopSound?: () => void;8  playHoverSound?: () => void;9  className?: string;10  variant?: "primary" | "secondary" | "accent";11  isLoading?: boolean;12  disabled?: boolean;13}14 15const NeoButtonComponent: React.FC<NeoButtonProps> = ({16  children,17  onClick,18  playHoverSound,19  className = "",20  variant = "primary",21  isLoading = false,22  disabled = false,23}) => {24  const colorClasses = {25    primary: "bg-yellow-300 hover:bg-yellow-400 border-black",26    secondary: "bg-pink-400 hover:bg-pink-500 border-black",27    accent: "bg-cyan-400 hover:bg-cyan-500 border-black",28  };29  const primaryShine = variant === "primary" ? "animate-shine" : "";30 31  return (32    <button33      onClick={onClick}34      onMouseEnter={playHoverSound}35      disabled={isLoading || disabled}36      className={`relative font-bold py-3 px-6 border-2 rounded-lg shadow-[4px_4px_0px_#000] transition-all duration-150 transform hover:-translate-y-1 active:shadow-[1px_1px_0px_#000] active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-[4px_4px_0px_#000] overflow-hidden ${colorClasses[variant]} ${className}`}37    >38      <span className={`absolute top-0 left-0 w-full h-full ${primaryShine}`} />39      <span className="relative z-10 flex items-center justify-center gap-3">40        {isLoading && <Loader className="animate-spin" />}41        {children}42      </span>43    </button>44  );45};46 47export default NeoButtonComponent;48