51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useTheme } from "next-themes"
|
|
import { ReactNode } from "react"
|
|
|
|
interface GlowingBorderWrapperProps {
|
|
children: ReactNode
|
|
className?: string
|
|
animate?: boolean
|
|
colors?: string[]
|
|
size?: "default" | "large"
|
|
}
|
|
|
|
export function GlowingBorderWrapper({
|
|
children,
|
|
className,
|
|
animate = true,
|
|
colors = [],
|
|
size = "default"
|
|
}: GlowingBorderWrapperProps) {
|
|
const { theme } = useTheme()
|
|
|
|
const gradientColors = colors.length
|
|
? colors.join(", ")
|
|
: theme === "dark"
|
|
? "rgba(255,255,255,0.2), rgba(255,255,255,0.05)"
|
|
: "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
|
|
|
|
const padding = size === "large" ? "p-[6px]" : "p-[2px]"
|
|
const roundedOuter = size === "large" ? "rounded-xl" : "rounded-lg"
|
|
const roundedInner = size === "large" ? "rounded-lg" : "rounded-md"
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative",
|
|
padding,
|
|
roundedOuter,
|
|
animate && "animate-glow",
|
|
className
|
|
)}
|
|
style={{
|
|
background: `linear-gradient(135deg, ${gradientColors})`,
|
|
}}
|
|
>
|
|
<div className={cn("overflow-hidden", roundedInner)}>{children}</div>
|
|
</div>
|
|
)
|
|
}
|