ppc_amnet/amnet-native/app/card/CardAddModal.tsx

import React from "react";
import {StatusBar} from "expo-status-bar";
import {Platform, TouchableOpacity, View} from "react-native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";

import {Card, Text, useTheme} from "react-native-paper";
import {SquareAsterisk, SquarePlus} from "lucide-react-native";

import ManualCardEntry from "./ManualCardEntry";

const Stack = createNativeStackNavigator();

function CardAddModal() {
    return (
        <Stack.Navigator initialRouteName="Select" screenOptions={{headerTitleStyle: {fontWeight: "bold"}}}>
            <Stack.Screen name="Select" component={CardAddMethodSelector} options={{headerShown: false}}/>

            <Stack.Screen name="Manual" component={ManualCardEntry} options={{title: "Add Card Manually"}}/>
        </Stack.Navigator>
    )
}

function CardAddMethodSelector({navigation}) {
    const theme = useTheme();

    return (
        <>
        {Platform.OS === 'ios' && <StatusBar style="light"/>}
        <View style={{paddingHorizontal: 15, paddingTop: 90, gap: 8}}>
            <View style={{paddingBottom: 25, gap: 5}}>
                <Text variant="titleLarge" style={{textAlign: "center", fontSize: 32, lineHeight: 32, fontWeight: "bold"}}>
                    Add new Card
                </Text>
                <Text variant="bodyMedium" style={{textAlign: "center"}}>
                    AMNet supports scanning physical cards, entering details manually or generating new ones.
                </Text>
            </View>

            <MethodCard color={theme.colors.secondary}
                        icon={<SquareAsterisk/>}
                        title="Enter Details Manually"
                        onPress={() => navigation.navigate('Manual')}/>

            <MethodCard color="#4caf50"
                        icon={<SquarePlus/>}
                        title="Generate New Card"
                        onPress={() => navigation.navigate('Manual', {autoGenerate: true})}/>
        </View>
    </>)
}

function MethodCard(props: {
    title: string,
    description?: string,
    color: string,
    disabled?: boolean,
    icon: React.ReactElement,
    onPress: () => void
}) {
    const theme = useTheme();
    const large = props.description?.length > 0;

    return (
        <TouchableOpacity onPress={() => !props.disabled && props.onPress()} disabled={props.disabled}>
            <Card mode={theme.dark ? "elevated" : "contained"} disabled={props.disabled}>
                <Card.Content style={{display: "flex", flexDirection: "row", alignItems: "center", gap: 15}}>
                    <View style={{
                        borderRadius: large ? 10 : 5,
                        height: large ? 50 : 30,
                        width: large ? 50 : 30,
                        backgroundColor: props.color,
                        justifyContent: "center",
                        alignItems: "center"
                    }}>
                        {React.cloneElement(props.icon, {size: large ? 24 : 16, color: theme.colors.surfaceVariant})}
                    </View>
                    <View style={{flexShrink: 1}}>
                        <Text style={{fontSize: large ? 16 : 14}}>{props.title}</Text>
                        {props.description && (<Text variant="bodyMedium" style={{fontSize: 12}}>{props.description}</Text>)}
                    </View>
                </Card.Content>
            </Card>
        </TouchableOpacity>
    )
}

export default CardAddModal;