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 : 140;
const imageWidth = width < 400 ? 120 : 146;

const carHeight = height < 700 ? 48 : 72;
const carWidth = width < 400 ? 100 : 140;

const ChooseCarForChargingRow = ({
    imageUrl,
    VehicleName,
    isDefault,
    navigationLink
}: {
    imageUrl?: any;
    VehicleName: string;
    isDefault: boolean;
    navigationLink: string;
}) => (
    <Pressable onPress={() => router.push(navigationLink)}>
        <View
            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={
                        imageUrl ? imageUrl : require('../../assets/car2.png')
                    }
                    style={{ height: carHeight, width: carWidth }}
                />
                <Text
                    style={{
                        fontSize: height < 700 ? 14 : 16,
                        color: '#222222'
                    }}
                >
                    {VehicleName}
                </Text>
            </View>
        </View>
    </Pressable>
);

export default ChooseCarForChargingRow;

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',

        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'
    }
});