58 lines
2.0 KiB
TypeScript

import React from 'react';
import { View, Text } from 'react-native';
import { useAppTheme } from '@theme';
import { PrimaryButton } from '@components';
import { LocationPinIcon } from '@icons';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AuthStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { getStyles } from './setLocationScreen.styles';
const SetLocationScreen: React.FC = () => {
const { colors } = useAppTheme();
const styles = getStyles(colors);
const navigation = useNavigation<NativeStackNavigationProp<AuthStackParamList>>();
return (
<View style={styles.container}>
{/* Blank Map Placeholder Area */}
<View style={styles.mapContainer}>
<View style={styles.placeholderMap}>
{/* Pulsing marker simulation */}
<View style={styles.pulseCircle} />
<LocationPinIcon size={40} color={colors.primary} />
<Text style={styles.mapText}>Select Location</Text>
<Text style={styles.mapSubText}>Drag the map to pinpoint your location</Text>
</View>
</View>
{/* Bottom Sheet Location Selector Card */}
<View style={styles.bottomCard}>
<View style={styles.cardHeader}>
<View style={styles.pinIconContainer}>
<LocationPinIcon size={20} color={colors.primary} />
</View>
<Text style={styles.cardTitle}>Choose Delivery Area</Text>
</View>
<View style={styles.addressContainer}>
<Text style={styles.addressLabel}>Current Address</Text>
<Text style={styles.addressText}>
MG Road, Ashok Nagar, Bengaluru, Karnataka 560001
</Text>
</View>
<PrimaryButton
title="Confirm Location"
onPress={() => navigation.navigate(RouteNames.CompleteProfile)}
style={styles.confirmButton}
/>
</View>
</View>
);
};
export default SetLocationScreen;