48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { ViewStyle, StyleProp, StatusBar } from 'react-native';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
|
|
type GradientPreset = 'warm' | 'cool';
|
|
|
|
interface GradientBackgroundProps {
|
|
children?: React.ReactNode;
|
|
style?: StyleProp<ViewStyle>;
|
|
colors?: string[];
|
|
start?: { x: number; y: number };
|
|
end?: { x: number; y: number };
|
|
locations?: number[];
|
|
preset?: GradientPreset;
|
|
}
|
|
|
|
const PRESET_COLORS: Record<GradientPreset, string[]> = {
|
|
// Warm preset similar to the provided login mock
|
|
warm: ['#FFE9CC', '#F6E6FF'],
|
|
// Cool preset for headers/hero based on guidelines
|
|
cool: ['#3AA0FF', '#2D6BFF'],
|
|
};
|
|
|
|
const GradientBackground: React.FC<GradientBackgroundProps> = ({
|
|
children,
|
|
style,
|
|
colors,
|
|
start,
|
|
end,
|
|
locations,
|
|
preset = 'warm',
|
|
}) => {
|
|
const gradientColors = colors ?? PRESET_COLORS[preset];
|
|
const gradientStart = start ?? { x: 0, y: 0 };
|
|
const gradientEnd = end ?? { x: 1, y: 1 };
|
|
|
|
return (
|
|
<LinearGradient colors={gradientColors} start={gradientStart} end={gradientEnd} locations={locations} style={style}>
|
|
<StatusBar backgroundColor={'#FFE9CC'} barStyle={'dark-content'} />
|
|
{children}
|
|
</LinearGradient>
|
|
);
|
|
};
|
|
|
|
export default GradientBackground;
|
|
|
|
|