1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
// "use client";
// import { useMotionValue, motion, useMotionTemplate } from "motion/react";
// import React, { MouseEvent as ReactMouseEvent, useState } from "react";
// import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";
// import { cn } from "@/lib/utils";
// export const CardSpotlight = ({
// children,
// radius = 350,
// color = "#ffffff33",
// className,
// ...props
// }: {
// radius?: number;
// color?: string;
// children: React.ReactNode;
// } & React.HTMLAttributes<HTMLDivElement>) => {
// const mouseX = useMotionValue(0);
// const mouseY = useMotionValue(0);
// function handleMouseMove({
// currentTarget,
// clientX,
// clientY,
// }: ReactMouseEvent<HTMLDivElement>) {
// let { left, top } = currentTarget.getBoundingClientRect();
// mouseX.set(clientX - left);
// mouseY.set(clientY - top);
// }
// const [isHovering, setIsHovering] = useState(false);
// const handleMouseEnter = () => setIsHovering(true);
// const handleMouseLeave = () => setIsHovering(false);
// return (
// <div
// className={cn(
// "group/spotlight p-10 rounded-md relative border border-neutral-800 bg-black dark:border-neutral-800",
// className
// )}
// onMouseMove={handleMouseMove}
// onMouseEnter={handleMouseEnter}
// onMouseLeave={handleMouseLeave}
// {...props}
// >
// <motion.div
// className="pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100"
// style={{
// backgroundColor: color,
// maskImage: useMotionTemplate`
// radial-gradient(
// ${radius}px circle at ${mouseX}px ${mouseY}px,
// white,
// transparent 80%
// )
// `,
// }}
// >
// {isHovering && (
// <CanvasRevealEffect
// animationSpeed={5}
// containerClassName="bg-transparent absolute inset-0 pointer-events-none"
// colors={[
// [59, 130, 246],
// [139, 92, 246],
// ]}
// dotSize={3}
// />
// )}
// </motion.div>
// {children}
// </div>
// );
// };
|
