49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Box } from './Box';
|
|
|
|
interface GlowProps {
|
|
color?: 'primary' | 'aqua' | 'purple' | 'amber';
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
opacity?: number;
|
|
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
|
|
className?: string;
|
|
}
|
|
|
|
export function Glow({
|
|
color = 'primary',
|
|
size = 'md',
|
|
opacity = 0.1,
|
|
position = 'center',
|
|
className = ''
|
|
}: GlowProps) {
|
|
const colorMap = {
|
|
primary: 'from-primary-accent/20',
|
|
aqua: 'from-telemetry-aqua/20',
|
|
purple: 'from-purple-500/20',
|
|
amber: 'from-warning-amber/20',
|
|
};
|
|
|
|
const sizeMap = {
|
|
sm: 'w-64 h-64',
|
|
md: 'w-96 h-96',
|
|
lg: 'w-[32rem] h-[32rem]',
|
|
xl: 'w-[48rem] h-[48rem]',
|
|
};
|
|
|
|
const positionMap = {
|
|
'top-left': '-top-32 -left-32',
|
|
'top-right': '-top-32 -right-32',
|
|
'bottom-left': '-bottom-32 -left-32',
|
|
'bottom-right': '-bottom-32 -right-32',
|
|
'center': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
position="absolute"
|
|
className={`${sizeMap[size]} ${positionMap[position]} bg-radial-gradient ${colorMap[color]} to-transparent blur-[100px] pointer-events-none ${className}`}
|
|
style={{ opacity }}
|
|
zIndex={0}
|
|
/>
|
|
);
|
|
}
|