28 lines
1.2 KiB
TypeScript
28 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
type AmbientBackgroundProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export default function AmbientBackground({ children }: AmbientBackgroundProps) {
|
|
const { isDark } = useGuestThemeVariant();
|
|
|
|
return (
|
|
<YStack
|
|
flex={1}
|
|
position="relative"
|
|
style={{
|
|
backgroundImage: isDark
|
|
? 'radial-gradient(circle at 18% 12%, rgba(255, 110, 110, 0.22), transparent 46%), radial-gradient(circle at 82% 18%, rgba(78, 205, 196, 0.18), transparent 44%), linear-gradient(180deg, rgba(6, 9, 20, 0.96), rgba(10, 14, 28, 1))'
|
|
: 'radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--guest-primary, #FF6B6B) 24%, white), transparent 50%), radial-gradient(circle at 82% 18%, color-mix(in oklab, var(--guest-secondary, #4ECDC4) 20%, white), transparent 48%), linear-gradient(180deg, color-mix(in oklab, var(--guest-background, #FFF5F5) 96%, white), color-mix(in oklab, var(--guest-background, #FFF5F5) 72%, white))',
|
|
backgroundSize: '140% 140%, 140% 140%, 100% 100%',
|
|
animation: 'guestNightAmbientDrift 18s ease-in-out infinite',
|
|
}}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|