Satyam
90 lines
3.3 KiB
React
90 lines
3.3 KiB
React
import React, { useRef, useState } from 'react';
|
|
|
|
export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", rounded = "rounded-3xl" }) => {
|
|
const divRef = useRef(null);
|
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
const [opacity, setOpacity] = useState(0);
|
|
|
|
const handleMouseMove = (e) => {
|
|
if (!divRef.current) return;
|
|
|
|
const div = divRef.current;
|
|
const rect = div.getBoundingClientRect();
|
|
|
|
setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
|
|
};
|
|
|
|
const handleFocus = () => {
|
|
setOpacity(1);
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setOpacity(0);
|
|
};
|
|
|
|
const handleMouseEnter = () => {
|
|
setOpacity(1);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setOpacity(0);
|
|
};
|
|
|
|
// Calculate inner rounding based on outer rounding
|
|
// If rounded-3xl (24px), inner should be ~22px
|
|
// If rounded-none (0px), inner should be 0px
|
|
const innerRounded = rounded === "rounded-none" ? "rounded-none" : "rounded-[22px]";
|
|
|
|
return (
|
|
<div
|
|
ref={divRef}
|
|
onMouseMove={handleMouseMove}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
// Light: bg-white, Dark: bg-zinc-800
|
|
className={`group relative ${rounded} bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
|
|
>
|
|
{/*
|
|
Rainbow Glow Layer
|
|
- Background: Full conic RGB rainbow (Works on both, provides the color)
|
|
- Mask reveals transparency
|
|
*/}
|
|
<div
|
|
className='pointer-events-none absolute inset-0 opacity-0 transition duration-300'
|
|
style={{
|
|
opacity,
|
|
background: `conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`,
|
|
WebkitMaskImage: `radial-gradient(500px circle at ${position.x}px ${position.y}px, black, transparent 40%)`,
|
|
maskImage: `radial-gradient(500px circle at ${position.x}px ${position.y}px, black, transparent 40%)`,
|
|
}}
|
|
/>
|
|
|
|
{/*
|
|
Inner Mask (Content Container)
|
|
- Light Mode: bg-white/90 (Opaque white with slight blur)
|
|
- Dark Mode: bg-zinc-950/90
|
|
*/}
|
|
<div className={`absolute inset-[2px] ${innerRounded} bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300`} />
|
|
|
|
{/* Surface Shine (Subtle top sheen) */}
|
|
<div
|
|
className='pointer-events-none absolute inset-0 opacity-0 transition duration-300 z-20 mix-blend-overlay'
|
|
style={{
|
|
opacity,
|
|
background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, rgba(255,255,255,0.3), transparent 40%)`,
|
|
}}
|
|
/>
|
|
|
|
{/* Light Mode Border (to separate card when not glowing) */}
|
|
<div className="absolute inset-0 rounded-3xl border border-zinc-200 dark:border-transparent pointer-events-none z-20" />
|
|
|
|
{/* Content */}
|
|
<div className="relative h-full z-30 flex flex-col">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|