crazycharge-app/component/global/chooseCarForChargingRow.tsx

import { View, Text, Image, StyleSheet, Pressable, Dimensions } from 'react-native';
import React from 'react';
import { StarSvg } from './SVG';
import { router } from 'expo-router';

const { width, height } = Dimensions.get('window');
const imageHeight = height < 700 ? 100 : 130;
const imageWidth = width < 400 ? 120 : 146;

const carHeight = height < 700 ? 48 : 72;
const carWidth = width < 400 ? 100 : 140;
const truncateText = (text, maxLength) => {
    if (text.length <= maxLength) return text;
    return text.substr(0, maxLength) + '...';
};

const ChooseCarForChargingRow = ({
    image,
    VehicleName,
    isDefault,
    onPress,
    isSelected
}: {
    isSelected?: boolean;
    image?: any;
    VehicleName: string;
    isDefault: boolean;
    onPress: () => void;
}) => (
    <Pressable onPress={onPress}>
        <View
            className={`bg-white rounded-lg ${isSelected ? 'border-4 border-[#34657b]' : ''}`}
            style={[styles.container, { height: imageHeight, width: imageWidth }]}
        >
            {isDefault && (
                <>
                    <View style={styles.topLeftTriangle} />
                    <View className="absolute top-1 left-1">
                        <StarSvg />
                    </View>
                </>
            )}
            <View className="items-center justify-center pt-4 space-y-2 ">
                <Image source={{ uri: image }} style={{ height: carHeight, width: carWidth }} />
                <Text
                    style={{
                        fontSize: height < 700 ? 14 : 16,
                        color: '#222222'
                    }}
                >
                    {truncateText(VehicleName, 10)}
                </Text>
            </View>
        </View>
    </Pressable>
);

export default ChooseCarForChargingRow;

const styles = StyleSheet.create({
    container: {
        overflow: 'hidden',
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 12,
        position: 'relative'
    },
    grayColor: {
        color: '#888888'
    },
    topLeftTriangle: {
        width: 0,
        height: 0,
        borderLeftWidth: 50,
        borderBottomWidth: 50,
        borderLeftColor: '#02677D',
        borderBottomColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});