import React from 'react'; import { PreAuthScreens, StackNavigationProps } from 'types'; import { Background, Box, Illustration, StyledText } from 'components'; import { BottomSection } from 'components/BottomSection'; import WelcomeStyle from './Welcome.style'; const Welcome = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Welcome'>) => { const handleNavigation = (route: 'Login' | 'SignUp') => { navigation.navigate(route); }; return ( <Background isBlue> <Box flex={1} alignItems="center"> <Box style={WelcomeStyle.logo}> <Illustration name="logo" /> </Box> <Box alignItems="center"> <StyledText variant="h3Regular" color="white" opacity={0.5}> Welcome to </StyledText> <StyledText variant="h1Light" color="white"> WHOLLET </StyledText> </Box> <Box flex={1} justifyContent="flex-end"> <BottomSection mainButtonVariant="secondary" mainButtonLabel="Create account" lightTextLabel="Already have an account?" accentTextLabel="Login" onMainButtonPress={() => handleNavigation('SignUp')} onAccentTextPress={() => handleNavigation('Login')} isWelcomePage /> </Box> </Box> </Background> ); }; export default Welcome;