Spaces:
Running
Running
File size: 2,580 Bytes
f581cc4 |
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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { useRef, useCallback, type ReactNode } from "react";
import type { GlassEffectProps } from "../types";
import GlassFilters from "./GlassFilters";
interface GlassContainerProps extends GlassEffectProps {
children: ReactNode;
className?: string;
onClick?: (e: React.MouseEvent) => void;
onMouseDown?: (e: React.MouseEvent) => void;
role?: string;
"aria-label"?: string;
"aria-labelledby"?: string;
style?: React.CSSProperties;
}
export default function GlassContainer({
children,
className = "",
bgColor = "rgba(0, 0, 0, 0.25)",
highlight = "rgba(255, 255, 255, 0.15)",
onClick,
onMouseDown,
role,
style,
...ariaProps
}: GlassContainerProps) {
const specularRef = useRef<HTMLDivElement>(null);
const handleMouseMove = useCallback((e: React.MouseEvent) => {
if (!specularRef.current) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
specularRef.current.style.background = `radial-gradient(
circle at ${x}px ${y}px,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.05) 30%,
rgba(255,255,255,0) 60%
)`;
}, []);
const handleMouseLeave = useCallback(() => {
if (specularRef.current) {
specularRef.current.style.background = "none";
}
}, []);
return (
<div
className={`glass-container relative overflow-hidden ${className}`}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
onClick={onClick}
onMouseDown={onMouseDown}
role={role}
style={
{
"--bg-color": bgColor,
"--highlight": highlight,
"--text": "#ffffff",
...style,
} as React.CSSProperties
}
{...ariaProps}
>
<GlassFilters />
{/* Glass layers */}
<div
className="glass-filter absolute inset-0 backdrop-blur-md z-10"
style={{
filter: "url(#glass-distortion) saturate(120%) brightness(1.15)",
borderRadius: "inherit",
}}
/>
<div
className="glass-overlay absolute inset-0 z-20"
style={{
background: "var(--bg-color)",
borderRadius: "inherit",
}}
/>
<div
ref={specularRef}
className="glass-specular absolute inset-0 z-30"
style={{
boxShadow: "inset 1px 1px 1px var(--highlight)",
borderRadius: "inherit",
}}
/>
{/* Content */}
<div className="glass-content relative z-40">{children}</div>
</div>
);
}
|