闪光按钮 Shiny Button

"use client"

import * as React from "react"
import { motion, useReducedMotion, type HTMLMotionProps } from "motion/react"

import { cn } from "@/lib/utils"

export interface ShinyButtonProps extends HTMLMotionProps<"button"> {
  /** Seconds for one full light sweep across the button. @default 3 */
  speed?: number
  /** Pause between sweeps, in seconds. @default 1.2 */
  gap?: number
  // Narrows motion's children type (which allows MotionValue) back to ReactNode.
  children?: React.ReactNode
}

/**
 * A "fancy" template component: a filled button with a light sweep that
 * continuously glides across it. Effect components like this are opt-in and are
 * allowed to be more opinionated than the core UI — but they still gate motion
 * on `prefers-reduced-motion`. Copy it as a starting point for your own effects.
 */
function ShinyButton({
  className,
  speed = 3,
  gap = 1.2,
  children,
  ...props
}: ShinyButtonProps) {
  const reduceMotion = useReducedMotion()

  return (
    <motion.button
      data-slot="shiny-button"
      whileTap={reduceMotion ? undefined : { scale: 0.97 }}
      className={cn(
        "relative inline-flex h-10 shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg border border-primary/20 bg-primary px-6 text-sm font-medium text-primary-foreground shadow-sm outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
        className
      )}
      {...props}
    >
      <span className="relative z-10 inline-flex items-center gap-2">
        {children}
      </span>
      <motion.span
        aria-hidden
        data-slot="shiny-button-sheen"
        className="pointer-events-none absolute inset-y-0 left-0 w-1/2"
        style={{
          background:
            "linear-gradient(110deg, transparent 25%, var(--shine) 50%, transparent 75%)",
        }}
        initial={{ x: "-120%" }}
        animate={reduceMotion ? undefined : { x: "220%" }}
        transition={{
          duration: speed,
          ease: [0.45, 0, 0.25, 1],
          repeat: Infinity,
          repeatDelay: gap,
        }}
      />
    </motion.button>
  )
}

export { ShinyButton }