blaisadmin
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, StyleSheet, Text, TextInput } from 'react-native';
|
|
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
|
|
|
import { ScreenContainer } from '@/components/common/ScreenContainer';
|
|
import { AuthStackParamList } from '@/navigation/types';
|
|
import { colors } from '@/theme/colors';
|
|
import { spacing } from '@/theme/spacing';
|
|
|
|
type Props = NativeStackScreenProps<AuthStackParamList, 'Register'>;
|
|
|
|
export function RegisterScreen({ navigation }: Props): React.JSX.Element {
|
|
return (
|
|
<ScreenContainer>
|
|
<Text style={styles.title}>Create your archer profile</Text>
|
|
<Text style={styles.subtitle}>
|
|
Add registration, email verification, and optional club metadata here.
|
|
</Text>
|
|
<TextInput style={styles.input} placeholder="Display name" placeholderTextColor={colors.muted} />
|
|
<TextInput style={styles.input} placeholder="Email" placeholderTextColor={colors.muted} />
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Password"
|
|
placeholderTextColor={colors.muted}
|
|
secureTextEntry
|
|
/>
|
|
<Pressable style={styles.primaryButton}>
|
|
<Text style={styles.primaryButtonText}>Register</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => navigation.goBack()}>
|
|
<Text style={styles.link}>Back to login</Text>
|
|
</Pressable>
|
|
</ScreenContainer>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
color: colors.text,
|
|
fontSize: 30,
|
|
fontWeight: '800',
|
|
},
|
|
subtitle: {
|
|
color: colors.muted,
|
|
lineHeight: 22,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 16,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: 14,
|
|
backgroundColor: colors.surface,
|
|
},
|
|
primaryButton: {
|
|
backgroundColor: colors.primary,
|
|
paddingVertical: 16,
|
|
borderRadius: 16,
|
|
alignItems: 'center',
|
|
},
|
|
primaryButtonText: {
|
|
color: colors.surface,
|
|
fontWeight: '700',
|
|
fontSize: 16,
|
|
},
|
|
link: {
|
|
color: colors.primary,
|
|
textAlign: 'center',
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|