"use client";
import React, { useRef, useEffect, CSSProperties } from "react";
import { cn } from "@/lib/utils";
interface BorderBeamProps {
children?: React.ReactNode;
lightWidth?: number;
duration?: number;
lightColor?: string;
className?: string;
[key: string]: any;
}
export default function BorderBeam({
children,
lightWidth = 200,
duration = 10,
lightColor = "#FAFAFA",
className,
...props
}: BorderBeamProps) {
const pathRef = useRef<HTMLDivElement>(null);
const updatePath = () => {
if (pathRef.current) {
const div = pathRef.current;
div.style.setProperty(
"--path",
`path("M 0 0 H ${div.offsetWidth} V ${div.offsetHeight} H 0 V 0")`
);
}
};
useEffect(() => {
updatePath();
window.addEventListener("resize", updatePath);
return () => {
window.removeEventListener("resize", updatePath);
};
}, []);
return (
<div
style={{
"--duration": duration,
"--light-width": `${lightWidth}px`,
"--light-color": lightColor,
isolation: "isolate",
} as CSSProperties}
ref={pathRef}
className={cn(
"absolute rounded-[inherit] z-0 w-full h-full overflow-hidden after:content-[''] after:absolute after:inset-[2px] dark:after:bg-black after:bg-white after:rounded-[inherit]",
"before:absolute before:inset-0 before:rounded-[inherit] before:border-2 before:border-black/5 dark:before:border-white/20",
className
)}
{...props}
>
<div
className="absolute aspect-square inset-0 animate-border-beam bg-[radial-gradient(ellipse_at_center,var(--light-color),transparent,transparent)]"
style={{
offsetPath: "var(--path)",
offsetDistance: "0%",
width: "var(--light-width)",
}}
/>
</div>
);
}