89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
|
import { FC } from "react"
|
||
|
|
import { TextStyle, View, ViewStyle } from "react-native"
|
||
|
|
|
||
|
|
import { Button } from "@/components/Button"
|
||
|
|
import { Screen } from "@/components/Screen"
|
||
|
|
import { Text } from "@/components/Text"
|
||
|
|
import type { AppStackScreenProps } from "@/navigators/navigationTypes"
|
||
|
|
import { useAppTheme } from "@/theme/context"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
|
||
|
|
interface AuthWelcomeScreenProps extends AppStackScreenProps<"AuthWelcome"> {}
|
||
|
|
|
||
|
|
export const AuthWelcomeScreen: FC<AuthWelcomeScreenProps> = ({ navigation }) => {
|
||
|
|
const { themed } = useAppTheme()
|
||
|
|
|
||
|
|
const handleLogin = () => {
|
||
|
|
navigation.navigate("Login")
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleRegister = () => {
|
||
|
|
navigation.navigate("Register")
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Screen
|
||
|
|
preset="fixed"
|
||
|
|
contentContainerStyle={themed($screenContainer)}
|
||
|
|
safeAreaEdges={["top", "bottom"]}
|
||
|
|
>
|
||
|
|
<View style={themed($content)}>
|
||
|
|
<Text text="Welcome" preset="heading" style={themed($title)} />
|
||
|
|
<Text
|
||
|
|
text="Sign in to continue or create a new account"
|
||
|
|
preset="subheading"
|
||
|
|
style={themed($subtitle)}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={themed($buttonContainer)}>
|
||
|
|
<Button
|
||
|
|
testID="login-button"
|
||
|
|
text="Log In"
|
||
|
|
style={themed($button)}
|
||
|
|
preset="reversed"
|
||
|
|
onPress={handleLogin}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
testID="register-button"
|
||
|
|
text="Create Account"
|
||
|
|
style={themed($button)}
|
||
|
|
preset="default"
|
||
|
|
onPress={handleRegister}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</Screen>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const $screenContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
flex: 1,
|
||
|
|
paddingHorizontal: spacing.lg,
|
||
|
|
justifyContent: "space-between",
|
||
|
|
})
|
||
|
|
|
||
|
|
const $content: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
flex: 1,
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingBottom: spacing.xxl,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
||
|
|
marginBottom: spacing.sm,
|
||
|
|
textAlign: "center",
|
||
|
|
})
|
||
|
|
|
||
|
|
const $subtitle: ThemedStyle<TextStyle> = () => ({
|
||
|
|
textAlign: "center",
|
||
|
|
})
|
||
|
|
|
||
|
|
const $buttonContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
paddingBottom: spacing.xl,
|
||
|
|
gap: spacing.md,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $button: ThemedStyle<ViewStyle> = () => ({
|
||
|
|
width: "100%",
|
||
|
|
})
|