47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface DecorativeBlurProps {
|
|
color?: 'blue' | 'green' | 'purple' | 'yellow' | 'red';
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
position?: 'top-right' | 'bottom-left' | 'center';
|
|
opacity?: number;
|
|
}
|
|
|
|
export function DecorativeBlur({
|
|
color = 'blue',
|
|
size = 'md',
|
|
position = 'center',
|
|
opacity = 10
|
|
}: DecorativeBlurProps) {
|
|
const colorClasses = {
|
|
blue: 'bg-primary-blue',
|
|
green: 'bg-performance-green',
|
|
purple: 'bg-purple-600',
|
|
yellow: 'bg-yellow-400',
|
|
red: 'bg-racing-red'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'w-32 h-32 blur-xl',
|
|
md: 'w-48 h-48 blur-2xl',
|
|
lg: 'w-64 h-64 blur-3xl',
|
|
xl: 'w-96 h-96 blur-[64px]'
|
|
};
|
|
|
|
const positionClasses = {
|
|
'top-right': 'absolute top-0 right-0',
|
|
'bottom-left': 'absolute bottom-0 left-0',
|
|
'center': 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
|
|
};
|
|
|
|
const opacityStyle = { opacity: opacity / 100 };
|
|
|
|
return (
|
|
<Box
|
|
className={`${colorClasses[color]} ${sizeClasses[size]} ${positionClasses[position]} rounded-full pointer-events-none`}
|
|
style={opacityStyle}
|
|
/>
|
|
);
|
|
}
|