mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-28 05:59:04 +08:00
38 lines
932 B
TypeScript
38 lines
932 B
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { memo } from "react"
|
|
|
|
interface AuroraTextProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
colors?: string[]
|
|
speed?: number
|
|
}
|
|
|
|
export const AuroraText = memo(
|
|
({ children, className = "", colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"], speed = 1 }: AuroraTextProps) => {
|
|
const gradientStyle = {
|
|
backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
animationDuration: `${10 / speed}s`,
|
|
}
|
|
|
|
return (
|
|
<span className={`relative inline-block ${className}`}>
|
|
<span className="sr-only">{children}</span>
|
|
<span
|
|
className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
|
|
style={gradientStyle}
|
|
aria-hidden="true"
|
|
>
|
|
{children}
|
|
</span>
|
|
</span>
|
|
)
|
|
},
|
|
)
|
|
|
|
AuroraText.displayName = "AuroraText"
|