created chargingpage Penalty time and idling time

component/chargingPenalty.tsx

@@ -0,0 +1,241 @@
+import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Svg, { Path, Rect } from 'react-native-svg';
+import NormalButton from './global/normal_button';
+import ExpectedFeeBox from './global/expectedFeeBox';
+import OtherInformationBox from './global/otherInformationBox';
+
+const BatteryLogoSvg = () => (
+    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+        <Rect width="40" height="40" rx="20" fill="#02677D" />
+        <Path
+            d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 20.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
+            fill="#FAFAFA"
+        />
+    </Svg>
+);
+
+const TimeClockLogoSvg = () => (
+    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+        <Rect width="40" height="40" rx="20" fill="#02677D" />
+        <Path
+            d="M23.6559 24.7652L24.7652 23.6559L20.7894 19.6799V14.7368H19.2105V20.3198L23.6559 24.7652ZM20.0018 30C18.6187 30 17.3186 29.7375 16.1016 29.2126C14.8846 28.6877 13.826 27.9753 12.9258 27.0755C12.0255 26.1757 11.3129 25.1175 10.7877 23.9011C10.2626 22.6846 10 21.3849 10 20.0018C10 18.6187 10.2625 17.3186 10.7874 16.1016C11.3123 14.8846 12.0247 13.826 12.9245 12.9258C13.8243 12.0256 14.8825 11.3129 16.0989 10.7877C17.3154 10.2626 18.6151 10 19.9982 10C21.3813 10 22.6814 10.2625 23.8984 10.7874C25.1154 11.3123 26.174 12.0247 27.0742 12.9245C27.9744 13.8243 28.6871 14.8825 29.2123 16.0989C29.7374 17.3154 30 18.6151 30 19.9982C30 21.3813 29.7375 22.6814 29.2126 23.8984C28.6877 25.1154 27.9753 26.174 27.0755 27.0742C26.1757 27.9744 25.1175 28.6871 23.9011 29.2123C22.6846 29.7374 21.3849 30 20.0018 30ZM20 28.4211C22.3333 28.4211 24.3202 27.6009 25.9605 25.9605C27.6009 24.3202 28.4211 22.3333 28.4211 20C28.4211 17.6667 27.6009 15.6798 25.9605 14.0395C24.3202 12.3991 22.3333 11.5789 20 11.5789C17.6667 11.5789 15.6798 12.3991 14.0395 14.0395C12.3991 15.6798 11.5789 17.6667 11.5789 20C11.5789 22.3333 12.3991 24.3202 14.0395 25.9605C15.6798 27.6009 17.6667 28.4211 20 28.4211Z"
+            fill="#FAFAFA"
+        />
+    </Svg>
+);
+
+const WarningTriangleLogoSvg = () => (
+    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+        <Path
+            d="M4.54172 35C4.23617 35 3.95839 34.9236 3.70839 34.7708C3.45839 34.6181 3.26395 34.4167 3.12506 34.1667C2.98617 33.9167 2.90978 33.6458 2.89589 33.3542C2.882 33.0625 2.95839 32.7778 3.12506 32.5L18.5417 5.83333C18.7084 5.55556 18.9237 5.34722 19.1876 5.20833C19.4514 5.06944 19.7223 5 20.0001 5C20.2778 5 20.5487 5.06944 20.8126 5.20833C21.0764 5.34722 21.2917 5.55556 21.4584 5.83333L36.8751 32.5C37.0417 32.7778 37.1181 33.0625 37.1042 33.3542C37.0903 33.6458 37.0139 33.9167 36.8751 34.1667C36.7362 34.4167 36.5417 34.6181 36.2917 34.7708C36.0417 34.9236 35.7639 35 35.4584 35H4.54172ZM7.41672 31.6667H32.5834L20.0001 10L7.41672 31.6667ZM20.0001 30C20.4723 30 20.8681 29.8403 21.1876 29.5208C21.507 29.2014 21.6667 28.8056 21.6667 28.3333C21.6667 27.8611 21.507 27.4653 21.1876 27.1458C20.8681 26.8264 20.4723 26.6667 20.0001 26.6667C19.5278 26.6667 19.132 26.8264 18.8126 27.1458C18.4931 27.4653 18.3334 27.8611 18.3334 28.3333C18.3334 28.8056 18.4931 29.2014 18.8126 29.5208C19.132 29.8403 19.5278 30 20.0001 30ZM20.0001 25C20.4723 25 20.8681 24.8403 21.1876 24.5208C21.507 24.2014 21.6667 23.8056 21.6667 23.3333V18.3333C21.6667 17.8611 21.507 17.4653 21.1876 17.1458C20.8681 16.8264 20.4723 16.6667 20.0001 16.6667C19.5278 16.6667 19.132 16.8264 18.8126 17.1458C18.4931 17.4653 18.3334 17.8611 18.3334 18.3333V23.3333C18.3334 23.8056 18.4931 24.2014 18.8126 24.5208C19.132 24.8403 19.5278 25 20.0001 25Z"
+            fill="white"
+        />
+    </Svg>
+);
+
+const IdlingGreyBox = () => {
+    return (
+        <View className="flex-1 ">
+            <View className="bg-[#5a5c7c] h-[44%] rounded-t-xl flex-row items-center px-[5%]">
+                <WarningTriangleLogoSvg />
+                <Text className="text-white font-black text-xl pl-4">
+                    待機中..
+                </Text>
+            </View>
+            <View className="bg-[#555776] h-[56%] rounded-b-xl px-[5%] py-2">
+                <View className="flex-1 flex-row items-center">
+                    <View className="w-[40%] ">
+                        <Text className="text-base text-white">
+                            剩餘待機時間:
+                        </Text>
+                    </View>
+                    <View className="w-[60%]">
+                        <Text style={styles.warningBoldText}>01:55</Text>
+                    </View>
+                </View>
+
+                <View className="flex-1  flex-row items-center">
+                    <View>
+                        <Text className="text-sm text-white">
+                            請於下方確認完成充電以免進入罰款時間
+                        </Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const PenaltyRedBox = () => {
+    return (
+        <>
+            <View className="bg-[#bb2d12] h-[35%] rounded-t-xl flex-row items-center px-[5%]">
+                <WarningTriangleLogoSvg />
+                <Text className="text-white font-black text-xl pl-4">
+                    罰款中
+                </Text>
+            </View>
+            <View className="bg-[#b12a11] h-[65%] rounded-b-xl px-[5%] py-2">
+                <View className="flex-1 flex-row items-center">
+                    <View className="w-[40%] ">
+                        <Text style={styles.warningLightText}>
+                            罰款時間歷時:
+                        </Text>
+                    </View>
+                    <View className="w-[60%]">
+                        <Text style={styles.warningBoldText}>01:55</Text>
+                    </View>
+                </View>
+                <View className="flex-1 flex-row items-center">
+                    <View className="w-[40%]">
+                        <Text style={styles.warningLightText}>累積:</Text>
+                    </View>
+                    <View className="w-[60%]">
+                        <Text style={styles.warningBoldText}>01:55</Text>
+                    </View>
+                </View>
+                <View className="flex-1  flex-row items-center">
+                    <View>
+                        <Text style={styles.warningLightText}>
+                            請於下方確認完成充電以解鎖
+                        </Text>
+                    </View>
+                </View>
+            </View>
+        </>
+    );
+};
+
+const ChargingPenaltyPage = () => {
+    const [isIdling, setIsIdling] = React.useState<boolean>(true);
+
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'left', 'right']}
+        >
+            <ScrollView className="flex-1">
+                <View className="h-[100vh] mx-[5%] space-y-4 ">
+                    <View className="mt-8">
+                        <Text className="text-xl" style={styles.greenColor}>
+                            已完成充電
+                        </Text>
+                        <Text className="text-2xl">TESLA Model 3</Text>
+                    </View>
+                    <View className="flex-row h-[16vh] items-center">
+                        <View className="w-[50%] items-center justify-center">
+                            <Image
+                                source={require('../assets/car.png')}
+                                resizeMode="contain"
+                                style={{ height: 127, width: 220 }}
+                            />
+                        </View>
+                        <View className="w-[50%] flex-column  items-center ">
+                            <View className="flex-row items-center space-x-4">
+                                <View>
+                                    <BatteryLogoSvg />
+                                </View>
+                                <View className="flex-column">
+                                    <Text
+                                        className="text-sm"
+                                        style={styles.grayColor}
+                                    >
+                                        已充電
+                                    </Text>
+                                    <Text
+                                        style={styles.greenColor}
+                                        className="text-4xl font-light"
+                                    >
+                                        95%
+                                    </Text>
+                                </View>
+                            </View>
+                            <View className="flex-row items-center space-x-4">
+                                <View>
+                                    <TimeClockLogoSvg />
+                                </View>
+                                <View className="flex-column">
+                                    <Text
+                                        className="text-sm"
+                                        style={styles.grayColor}
+                                    >
+                                        充電歷時
+                                    </Text>
+                                    <View className="flex-row items-end">
+                                        <Text
+                                            style={styles.greenColor}
+                                            className="text-4xl font-light"
+                                        >
+                                            39
+                                        </Text>
+                                        <Text
+                                            style={styles.greenColor}
+                                            className="text-sm font-light"
+                                        >
+                                            mins
+                                        </Text>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                    {isIdling ? (
+                        <View className="flex-column h-[16vh]">
+                            <IdlingGreyBox />
+                        </View>
+                    ) : (
+                        <View className="flex-column h-[22vh]">
+                            <PenaltyRedBox />
+                        </View>
+                    )}
+                    <View className="w-full ">
+                        <NormalButton
+                            onPress={() => {
+                                console.log('完成充電');
+                            }}
+                            title={
+                                <Text
+                                    className="text-xl text-white"
+                                    style={{ fontWeight: 900 }}
+                                >
+                                    完成充電
+                                </Text>
+                            }
+                        />
+                    </View>
+                    <ExpectedFeeBox
+                        extendedStyle={{ marginVertical: 16, height: '10%' }}
+                    />
+
+                    <OtherInformationBox extendedStyle={{ height: '12%' }} />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default ChargingPenaltyPage;
+const styles = StyleSheet.create({
+    grayColor: {
+        color: '#888888'
+    },
+    greenColor: {
+        color: '#02677D'
+    },
+    text: {
+        fontWeight: '300',
+        color: '#000000'
+    },
+    warningLightText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: '400'
+    },
+    warningBoldText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: '700'
+    }
+});

component/global/expectedFeeBox.tsx

@@ -0,0 +1,28 @@
+import { View, Text, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+
+interface ExpectedFeeBoxProps {
+    extendedStyle?: StyleProp<ViewStyle>;
+}
+// SearchPage: React.FC<SearchPageProps>
+//this is a reuseable component "預計充電費用" 灰色格仔 on Charging Page
+const ExpectedFeeBox: React.FC<ExpectedFeeBoxProps> = ({ extendedStyle }) => {
+    return (
+        <View
+            className="h-[8%] min-h-[20px] border-slate-300 rounded-2xl justify-center"
+            style={[{ borderWidth: 1 }, extendedStyle]}
+        >
+            <View className="mx-[5%] flex-row items-center justify-between">
+                <View>
+                    <Text className="text-lg">預計充電費用</Text>
+                    <Text className="text-base color-[#888888]">
+                        按每度電結算: 50 kWh
+                    </Text>
+                </View>
+                <Text className="text-3xl">HK$ 175</Text>
+            </View>
+        </View>
+    );
+};
+
+export default ExpectedFeeBox;

component/global/otherInformationBox.tsx

@@ -0,0 +1,30 @@
+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="h-[10%]  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;