João Henrique
b541f502ba
- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
45 lines
1.0 KiB
TypeScript
Executable File
45 lines
1.0 KiB
TypeScript
Executable File
import type { CSSProperties } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface BorderBeamProps {
|
|
size?: number
|
|
duration?: number
|
|
delay?: number
|
|
colorFrom?: string
|
|
colorTo?: string
|
|
className?: string
|
|
style?: CSSProperties
|
|
reverse?: boolean
|
|
initialOffset?: number
|
|
borderWidth?: number
|
|
}
|
|
|
|
export function BorderBeam({
|
|
className,
|
|
size = 50,
|
|
delay = 0,
|
|
duration = 6,
|
|
colorFrom = "#ffaa40",
|
|
colorTo = "#9c40ff",
|
|
style,
|
|
reverse = false,
|
|
initialOffset = 0,
|
|
borderWidth = 1,
|
|
}: BorderBeamProps) {
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className={cn("border-beam", reverse && "border-beam-reverse", className)}
|
|
style={{
|
|
"--border-beam-size": `${size}px`,
|
|
"--border-beam-duration": `${duration}s`,
|
|
"--border-beam-delay": `${-delay - (duration * initialOffset) / 100}s`,
|
|
"--border-beam-from": colorFrom,
|
|
"--border-beam-to": colorTo,
|
|
"--border-beam-width": `${borderWidth}px`,
|
|
...style,
|
|
} as CSSProperties}
|
|
/>
|
|
)
|
|
}
|