47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef } from "react";
|
|
import "./spotlight-card.css";
|
|
|
|
interface Position {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface SpotlightCardProps extends React.PropsWithChildren {
|
|
className?: string;
|
|
spotlightColor?: `rgba(${number}, ${number}, ${number}, ${number})`;
|
|
}
|
|
|
|
const SpotlightCard: React.FC<SpotlightCardProps> = ({
|
|
children,
|
|
className = "",
|
|
spotlightColor = "rgba(255, 255, 255, 0.25)",
|
|
}) => {
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
|
|
if (!divRef.current) return;
|
|
|
|
const rect = divRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
divRef.current.style.setProperty("--mouse-x", `${x}px`);
|
|
divRef.current.style.setProperty("--mouse-y", `${y}px`);
|
|
divRef.current.style.setProperty("--spotlight-color", spotlightColor);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={divRef}
|
|
onMouseMove={handleMouseMove}
|
|
className={`card-spotlight ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SpotlightCard;
|