Untitled
unknown
plain_text
4 days ago
8.8 kB
10
Indexable
import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, ScrollView, Image, StatusBar } from 'react-native'; import { useRouter } from 'expo-router'; import { Mail, Lock, User, Eye, EyeOff, ArrowLeft, CheckSquare } from 'lucide-react-native'; import { Colors } from '../../../constants/Color'; export default function PedagangRegister() { const router = useRouter(); const [nama, setNama] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [konfirmasiPassword, setKonfirmasiPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [showKonfirmasiPassword, setShowKonfirmasiPassword] = useState(false); const [isAgreed, setIsAgreed] = useState(false); const handleRegister = () => { // Nanti di sini implementasi register console.log('Register dengan:', { nama, email, password }); // Untuk sementara langsung redirect ke login router.push('/pedagang/auth/login'); }; return ( <SafeAreaView style={styles.container}> <StatusBar backgroundColor="#6A3DE8" barStyle="light-content" /> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.keyboardView} > <ScrollView contentContainerStyle={styles.scrollView}> <View style={styles.header}> <TouchableOpacity style={styles.backButton} onPress={() => router.back()} > <ArrowLeft size={24} color="#FFFFFF" /> </TouchableOpacity> <Text style={styles.headerTitle}>Sign up</Text> <View style={{ width: 40 }} /> </View> <View style={styles.formCard}> {/* Social Media Sign Up Options */} <View style={styles.socialContainer}> <TouchableOpacity style={[styles.socialButton, { backgroundColor: '#3b5998' }]}> <Text style={styles.socialButtonText}>Sign up with Facebook</Text> </TouchableOpacity> <TouchableOpacity style={[styles.socialButton, { backgroundColor: '#1DA1F2' }]}> <Text style={styles.socialButtonText}>Sign up with Twitter</Text> </TouchableOpacity> <TouchableOpacity style={[styles.socialButton, { backgroundColor: '#DB4437' }]}> <Text style={styles.socialButtonText}>Sign up with Google</Text> </TouchableOpacity> <View style={styles.divider}> <View style={styles.dividerLine} /> <Text style={styles.dividerText}>or</Text> <View style={styles.dividerLine} /> </View> </View> {/* Email and Password Fields */} <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder="Email or mobile number" value={email} onChangeText={setEmail} keyboardType="email-address" autoCapitalize="none" placeholderTextColor="#999" /> </View> <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry={!showPassword} placeholderTextColor="#999" /> <TouchableOpacity style={styles.eyeIcon} onPress={() => setShowPassword(!showPassword)} > {showPassword ? ( <EyeOff size={20} color="#999" /> ) : ( <Eye size={20} color="#999" /> )} </TouchableOpacity> </View> <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder="Confirm Password" value={konfirmasiPassword} onChangeText={setKonfirmasiPassword} secureTextEntry={!showKonfirmasiPassword} placeholderTextColor="#999" /> <TouchableOpacity style={styles.eyeIcon} onPress={() => setShowKonfirmasiPassword(!showKonfirmasiPassword)} > {showKonfirmasiPassword ? ( <EyeOff size={20} color="#999" /> ) : ( <Eye size={20} color="#999" /> )} </TouchableOpacity> </View> {/* Terms and Conditions */} <View style={styles.termsContainer}> <TouchableOpacity style={styles.checkbox} onPress={() => setIsAgreed(!isAgreed)} > {isAgreed ? ( <CheckSquare size={20} color="#6A3DE8" /> ) : ( <View style={styles.emptyCheckbox} /> )} </TouchableOpacity> <Text style={styles.termsText}> I agree to our <Text style={styles.termsLink}>Terms and Conditions Agreement</Text>. </Text> </View> {/* Sign Up Button */} <TouchableOpacity style={styles.signupButton} onPress={handleRegister} > <Text style={styles.signupButtonText}>Sign in</Text> </TouchableOpacity> {/* Login Link */} <View style={styles.loginContainer}> <Text style={styles.loginText}>Already have account? </Text> <TouchableOpacity onPress={() => router.push('/pedagang/auth/login')}> <Text style={styles.loginLink}>Sign in</Text> </TouchableOpacity> </View> </View> </ScrollView> </KeyboardAvoidingView> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#6A3DE8', }, keyboardView: { flex: 1, }, scrollView: { flexGrow: 1, justifyContent: 'space-between', }, header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 30, }, backButton: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 20, }, headerTitle: { fontSize: 24, fontWeight: 'bold', color: '#FFFFFF', }, formCard: { flex: 1, backgroundColor: '#FFFFFF', borderTopLeftRadius: 30, borderTopRightRadius: 30, paddingHorizontal: 24, paddingTop: 30, paddingBottom: 40, }, socialContainer: { marginBottom: 20, }, socialButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 50, borderRadius: 25, marginBottom: 12, }, socialButtonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '500', }, divider: { flexDirection: 'row', alignItems: 'center', marginVertical: 15, }, dividerLine: { flex: 1, height: 1, backgroundColor: '#E0E0E0', }, dividerText: { marginHorizontal: 10, color: '#9E9E9E', fontSize: 14, }, inputContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#F5F5F5', borderRadius: 10, marginBottom: 16, height: 56, paddingHorizontal: 16, }, input: { flex: 1, height: '100%', fontSize: 16, color: '#333', }, eyeIcon: { padding: 8, }, termsContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 24, marginTop: 8, }, checkbox: { marginRight: 10, }, emptyCheckbox: { width: 20, height: 20, borderWidth: 1, borderColor: '#9E9E9E', borderRadius: 4, }, termsText: { flex: 1, fontSize: 14, color: '#666', }, termsLink: { color: '#6A3DE8', fontWeight: '500', }, signupButton: { backgroundColor: '#FFFFFF', borderWidth: 2, borderColor: '#6A3DE8', height: 56, borderRadius: 28, justifyContent: 'center', alignItems: 'center', marginBottom: 20, }, signupButtonText: { color: '#6A3DE8', fontSize: 16, fontWeight: 'bold', }, loginContainer: { flexDirection: 'row', justifyContent: 'center', }, loginText: { color: '#9E9E9E', fontSize: 14, }, loginLink: { color: '#6A3DE8', fontSize: 14, fontWeight: 'bold', }, });
Editor is loading...
Leave a Comment