crazycharge-app/component/global/otherInformationBox.tsx

import { View, Text, StyleProp, ViewStyle } from 'react-native';
import React from 'react';

//this is a reuseable component "其他資訊" 灰色格仔 on Charging Page
interface OtherInformationBoxProps {
    extendedStyle?: StyleProp<ViewStyle>;
}
const OtherInformationBox: React.FC<OtherInformationBoxProps> = ({
    extendedStyle
}) => {
    return (
        <View
            className="border-slate-300 rounded-2xl justify-center pl-4"
            style={[{ borderWidth: 1 }, extendedStyle]}
        >
            <Text className="text-lg pb-2">其他資訊</Text>
            <View className="flex-row">
                <View className="flex-1 flex-column">
                    <Text className="text-base color-[#888888]">開始時間</Text>
                    <Text className="text-base">16:33:04</Text>
                </View>
                <View className="flex-1 flex-column">
                    <Text className="text-base color-[#888888]">充電座</Text>
                    <Text className="text-base">A104</Text>
                </View>
            </View>
        </View>
    );
};
export default OtherInformationBox;