ppc_amnet/amnet-native/components/AMUICard.tsx

import React from "react";
import {TouchableOpacity, View} from "react-native";
import {Card, Title, useTheme} from "react-native-paper";

export interface AMUICardActionProps {
    actionIcon?: Readonly<React.ReactNode>,
    actionDisabled?: boolean,

    onPress?: () => void,
    onLongPress?: () => void,
}

export interface AMUICardProps {
    title: string,
    children?: Readonly<React.ReactNode>
}

export function AMUICard(props: AMUICardActionProps & AMUICardProps) {
    if (props.actionDisabled == undefined && !props.onPress && !props.onLongPress) {
        return (<CardComponent {...props}/>)
    }

    return (
        <TouchableOpacity disabled={props.actionDisabled} onPress={props.onPress} onLongPress={props.onLongPress}>
            <CardComponent {...props}/>
        </TouchableOpacity>
    );
}

export function AMUICardDetail(props: { children?: Readonly<React.ReactNode> }) {
    return (
        <View style={{display: "flex", flexDirection: "row", alignItems: "center", gap: 8}}>
            {props.children}
        </View>
    )
}

function CardComponent(props: AMUICardProps & AMUICardActionProps) {
    const theme = useTheme();
    
    return (<Card mode="outlined" style={{backgroundColor: theme.colors.background, borderColor: theme.colors.surfaceVariant}}>
            <Card.Content style={{
                flexDirection: "row",
                alignItems: "center",
                display: "flex",
                flexShrink: 1,
                flexGrow: 1,
                gap: 5
            }}>
                <View style={{flexGrow: 1}}>
                    <Title style={{fontWeight: "bold"}}>{props.title}</Title>
                    <View style={{display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10}}>
                        {props.children}
                    </View>
                </View>
                {props.actionIcon && (
                    <View style={{flexShrink: 0}}>
                        {props.actionIcon}
                    </View>
                )}
            </Card.Content>
        </Card>
    )
}