etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(backgrounds): read aurora gradient colors and speed from settings

Browse Source
This commit is contained in:
Boris Kovalskii
2026-06-11 09:45:17 +10:00
parent 515c3d73b8
commit 66c08b5d6d
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ui/backgrounds/aurora-background.tsx
View File

@@ -1,5 +1,5 @@
import { cn } from '@/lib/utils';
import { safeBoolean } from './types';
import { sanitizeColor, safeBoolean, safeSelect } from './types';
import { useAnimationPause } from '@/hooks/useAnimationLoop';
interface Props {
@@ -8,7 +8,17 @@ interface Props {
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
const SPEED_DURATIONS: Record<string, string> = {
slow: '90s',
normal: '60s',
fast: '30s',
};
export default function AuroraBackground({ settings }: Props) {
const firstColor = sanitizeColor(settings.firstColor, '#3b82f6');
const secondColor = sanitizeColor(settings.secondColor, '#a5b4fc');
const thirdColor = sanitizeColor(settings.thirdColor, '#93c5fd');
const speed = safeSelect(settings.speed, ['slow', 'normal', 'fast'] as const, 'normal');
const showRadialGradient = safeBoolean(settings.showRadialGradient, true);
const paused = useAnimationPause();
@@ -22,9 +32,9 @@ export default function AuroraBackground({ settings }: Props) {
'[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,transparent_70%)]',
)}
style={{
backgroundImage:
'repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%), repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%)',
backgroundImage: `repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%), repeating-linear-gradient(100deg, ${firstColor} 10%, ${secondColor} 15%, ${thirdColor} 20%, ${secondColor} 25%, ${firstColor} 30%)`,
backgroundSize: isMobile ? '100%, 100%' : '300%, 200%',
animationDuration: SPEED_DURATIONS[speed],
animationPlayState: paused ? 'paused' : 'running',
}}
/>