31 lines
755 B
TypeScript
31 lines
755 B
TypeScript
export function GlassBox({
|
|
children,
|
|
className = "",
|
|
frostSrc,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
frostSrc: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`glass-box overflow-hidden ${className}`}
|
|
style={{
|
|
WebkitBackdropFilter: "blur(18px) saturate(160%)",
|
|
backdropFilter: "blur(18px) saturate(160%)",
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 scale-125 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: `url("${frostSrc}")`,
|
|
filter: "blur(18px)",
|
|
}}
|
|
/>
|
|
<span className="pointer-events-none absolute inset-0 bg-white/30" />
|
|
<div className="relative z-10">{children}</div>
|
|
</div>
|
|
);
|
|
}
|