|
|
@@ -1,4 +1,4 @@
|
|
|
-import { View, Text, StyleSheet, ScrollView } from 'react-native';
|
|
|
+import { View, Text, ScrollView } from 'react-native';
|
|
|
import NormalButton from '../global/normal_button';
|
|
|
import Svg, { Path } from 'react-native-svg';
|
|
|
import NormalInput from '../global/normal_input';
|
|
|
@@ -80,270 +80,281 @@ const BookingIconSvg = () => (
|
|
|
);
|
|
|
const HomePage: React.FC<HomePageProps> = () => {
|
|
|
return (
|
|
|
- <ScrollView className="bg-[#ffffff] flex-1 h-[100vh]">
|
|
|
- <View className="flex-1 mx-[5%] mt-[30px]">
|
|
|
- <View className="flex-1 pb-6">
|
|
|
- <View className="flex-row items-center pb-2">
|
|
|
- <HomeIconSvg />
|
|
|
- <View className="pl-2 flex-1 flex-column ">
|
|
|
- <View className="flex-row justify-between">
|
|
|
- <Text className="text-lg pb-1">你好！</Text>
|
|
|
- <BellIconSvg />
|
|
|
- </View>
|
|
|
- <Text className="text-4xl font-light ">
|
|
|
- Mike Chan
|
|
|
- </Text>
|
|
|
+ <View className="bg-[#ffffff] flex-1 px-[5%] pt-[70px]">
|
|
|
+ <View className="basis-1/3">
|
|
|
+ <View className="flex-row items-center pb-8">
|
|
|
+ <HomeIconSvg />
|
|
|
+ <View className="pl-2 flex-1 flex-column ">
|
|
|
+ <View className="flex-row justify-between">
|
|
|
+ <Text className="text-lg pb-1">你好！</Text>
|
|
|
+ <BellIconSvg />
|
|
|
</View>
|
|
|
+ <Text className="text-4xl font-light ">Mike Chan</Text>
|
|
|
</View>
|
|
|
- <NormalInput
|
|
|
- placeholder="搜尋充電站或地區"
|
|
|
- onChangeText={() => console.log('abc')}
|
|
|
- />
|
|
|
</View>
|
|
|
- <View className="flex-column">
|
|
|
- <View style={styles.recentBookingMainContainer}>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontWeight: 400,
|
|
|
- fontSize: 16,
|
|
|
- color: '#222222',
|
|
|
- marginBottom: '5%'
|
|
|
- }}
|
|
|
- >
|
|
|
- 近期預約過
|
|
|
- </Text>
|
|
|
- <ScrollView>
|
|
|
- <View style={styles.recentBookingRowContainer}>
|
|
|
- <BookingIconSvg />
|
|
|
+ <NormalInput
|
|
|
+ placeholder="搜尋充電站或地區"
|
|
|
+ onChangeText={() => console.log('abc')}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className="basis-1/3 mt-[-35] pb-6 flex-column">
|
|
|
+ <View>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#222222',
|
|
|
+ marginBottom: '5%'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 近期預約過
|
|
|
+ </Text>
|
|
|
+ <ScrollView>
|
|
|
+ <View style={styles.recentBookingRowContainer}>
|
|
|
+ <BookingIconSvg />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flex: 1,
|
|
|
+ borderBottomWidth: 0.5,
|
|
|
+ paddingVertical: 15,
|
|
|
+ borderColor: '#ccc',
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ >
|
|
|
<View
|
|
|
style={{
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'space-between',
|
|
|
- flex: 1,
|
|
|
- borderBottomWidth: 0.5,
|
|
|
- paddingVertical: 15,
|
|
|
- borderColor: '#ccc',
|
|
|
- borderRadius: 8
|
|
|
+ marginLeft: 15,
|
|
|
+ gap: 3
|
|
|
}}
|
|
|
>
|
|
|
- <View
|
|
|
+ <Text
|
|
|
style={{
|
|
|
- marginLeft: 15,
|
|
|
- gap: 3
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#222222'
|
|
|
}}
|
|
|
>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#222222'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站#1
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#888888'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站地址#1
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <NormalButton
|
|
|
- title={
|
|
|
- <Text style={{ color: '#061E25' }}>
|
|
|
- 重新預約
|
|
|
- </Text>
|
|
|
- }
|
|
|
- onPress={() => console.log('abc')}
|
|
|
- buttonPressedStyle={{
|
|
|
- backgroundColor: '#CFDEE4'
|
|
|
- }}
|
|
|
- extendedStyle={{
|
|
|
- backgroundColor: '#E3F2F8',
|
|
|
- paddingHorizontal: 25,
|
|
|
- paddingVertical: 1,
|
|
|
- borderRadius: 8
|
|
|
+ 充電站#1
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888'
|
|
|
}}
|
|
|
- />
|
|
|
+ >
|
|
|
+ 充電站地址#1
|
|
|
+ </Text>
|
|
|
</View>
|
|
|
+ <NormalButton
|
|
|
+ title={
|
|
|
+ <Text style={{ color: '#061E25' }}>
|
|
|
+ 重新預約
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ onPress={() => console.log('abc')}
|
|
|
+ buttonPressedStyle={{
|
|
|
+ backgroundColor: '#CFDEE4'
|
|
|
+ }}
|
|
|
+ extendedStyle={{
|
|
|
+ backgroundColor: '#E3F2F8',
|
|
|
+ paddingHorizontal: 25,
|
|
|
+ paddingVertical: 1,
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ />
|
|
|
</View>
|
|
|
- <View style={styles.recentBookingRowContainer}>
|
|
|
- <BookingIconSvg />
|
|
|
+ </View>
|
|
|
+ <View style={styles.recentBookingRowContainer}>
|
|
|
+ <BookingIconSvg />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flex: 1,
|
|
|
+ borderBottomWidth: 0.5,
|
|
|
+ paddingVertical: 15,
|
|
|
+ borderColor: '#ccc',
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ >
|
|
|
<View
|
|
|
style={{
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'space-between',
|
|
|
- flex: 1,
|
|
|
- borderBottomWidth: 0.5,
|
|
|
- paddingVertical: 15,
|
|
|
- borderColor: '#ccc',
|
|
|
- borderRadius: 8
|
|
|
+ marginLeft: 15,
|
|
|
+ gap: 3
|
|
|
}}
|
|
|
>
|
|
|
- <View
|
|
|
+ <Text
|
|
|
style={{
|
|
|
- marginLeft: 15,
|
|
|
- gap: 3
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#222222'
|
|
|
}}
|
|
|
>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#222222'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站#2
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#888888'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站地址#2
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <NormalButton
|
|
|
- title={
|
|
|
- <Text style={{ color: '#061E25' }}>
|
|
|
- 重新預約
|
|
|
- </Text>
|
|
|
- }
|
|
|
- onPress={() => console.log('abc')}
|
|
|
- buttonPressedStyle={{
|
|
|
- backgroundColor: '#CFDEE4'
|
|
|
- }}
|
|
|
- extendedStyle={{
|
|
|
- backgroundColor: '#E3F2F8',
|
|
|
- paddingHorizontal: 25,
|
|
|
- paddingVertical: 1,
|
|
|
- borderRadius: 8
|
|
|
+ 充電站#2
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888'
|
|
|
}}
|
|
|
- />
|
|
|
+ >
|
|
|
+ 充電站地址#2
|
|
|
+ </Text>
|
|
|
</View>
|
|
|
+ <NormalButton
|
|
|
+ title={
|
|
|
+ <Text style={{ color: '#061E25' }}>
|
|
|
+ 重新預約
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ onPress={() => console.log('abc')}
|
|
|
+ buttonPressedStyle={{
|
|
|
+ backgroundColor: '#CFDEE4'
|
|
|
+ }}
|
|
|
+ extendedStyle={{
|
|
|
+ backgroundColor: '#E3F2F8',
|
|
|
+ paddingHorizontal: 25,
|
|
|
+ paddingVertical: 1,
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ />
|
|
|
</View>
|
|
|
- <View style={styles.recentBookingRowContainer}>
|
|
|
- <BookingIconSvg />
|
|
|
+ </View>
|
|
|
+ <View style={styles.recentBookingRowContainer}>
|
|
|
+ <BookingIconSvg />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flex: 1,
|
|
|
+ borderBottomWidth: 0.5,
|
|
|
+ paddingVertical: 15,
|
|
|
+ borderColor: '#ccc',
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ >
|
|
|
<View
|
|
|
style={{
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'space-between',
|
|
|
- flex: 1,
|
|
|
- borderBottomWidth: 0.5,
|
|
|
- paddingVertical: 15,
|
|
|
- borderColor: '#ccc',
|
|
|
- borderRadius: 8
|
|
|
+ marginLeft: 15,
|
|
|
+ gap: 3
|
|
|
}}
|
|
|
>
|
|
|
- <View
|
|
|
+ <Text
|
|
|
style={{
|
|
|
- marginLeft: 15,
|
|
|
- gap: 3
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#222222'
|
|
|
}}
|
|
|
>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#222222'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站#3
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#888888'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站地址#3
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <NormalButton
|
|
|
- title={
|
|
|
- <Text style={{ color: '#061E25' }}>
|
|
|
- 重新預約
|
|
|
- </Text>
|
|
|
- }
|
|
|
- onPress={() => console.log('abc')}
|
|
|
- buttonPressedStyle={{
|
|
|
- backgroundColor: '#CFDEE4'
|
|
|
- }}
|
|
|
- extendedStyle={{
|
|
|
- backgroundColor: '#E3F2F8',
|
|
|
- paddingHorizontal: 25,
|
|
|
- paddingVertical: 1,
|
|
|
- borderRadius: 8
|
|
|
+ 充電站#3
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888'
|
|
|
}}
|
|
|
- />
|
|
|
+ >
|
|
|
+ 充電站地址#3
|
|
|
+ </Text>
|
|
|
</View>
|
|
|
+ <NormalButton
|
|
|
+ title={
|
|
|
+ <Text style={{ color: '#061E25' }}>
|
|
|
+ 重新預約
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ onPress={() => console.log('abc')}
|
|
|
+ buttonPressedStyle={{
|
|
|
+ backgroundColor: '#CFDEE4'
|
|
|
+ }}
|
|
|
+ extendedStyle={{
|
|
|
+ backgroundColor: '#E3F2F8',
|
|
|
+ paddingHorizontal: 25,
|
|
|
+ paddingVertical: 1,
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ />
|
|
|
</View>
|
|
|
- <View style={styles.recentBookingRowContainer}>
|
|
|
- <BookingIconSvg />
|
|
|
+ </View>
|
|
|
+ <View className="flex-row items-center">
|
|
|
+ <BookingIconSvg />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flex: 1,
|
|
|
+ borderBottomWidth: 0.5,
|
|
|
+ paddingVertical: 15,
|
|
|
+ borderColor: '#ccc',
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ >
|
|
|
<View
|
|
|
style={{
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'space-between',
|
|
|
- flex: 1,
|
|
|
- borderBottomWidth: 0.5,
|
|
|
- paddingVertical: 15,
|
|
|
- borderColor: '#ccc',
|
|
|
- borderRadius: 8
|
|
|
+ marginLeft: 15,
|
|
|
+ gap: 3
|
|
|
}}
|
|
|
>
|
|
|
- <View
|
|
|
+ <Text
|
|
|
style={{
|
|
|
- marginLeft: 15,
|
|
|
- gap: 3
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#222222'
|
|
|
}}
|
|
|
>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#222222'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站#4
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontSize: 16,
|
|
|
- color: '#888888'
|
|
|
- }}
|
|
|
- >
|
|
|
- 充電站地址#4
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <NormalButton
|
|
|
- title={
|
|
|
- <Text style={{ color: '#061E25' }}>
|
|
|
- 重新預約
|
|
|
- </Text>
|
|
|
- }
|
|
|
- onPress={() => console.log('abc')}
|
|
|
- buttonPressedStyle={{
|
|
|
- backgroundColor: '#CFDEE4'
|
|
|
- }}
|
|
|
- extendedStyle={{
|
|
|
- backgroundColor: '#E3F2F8',
|
|
|
- paddingHorizontal: 25,
|
|
|
- paddingVertical: 1,
|
|
|
- borderRadius: 8
|
|
|
+ 充電站#4
|
|
|
+ </Text>
|
|
|
+ <Text
|
|
|
+ style={{
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#888888'
|
|
|
}}
|
|
|
- />
|
|
|
+ >
|
|
|
+ 充電站地址#4
|
|
|
+ </Text>
|
|
|
</View>
|
|
|
+ <NormalButton
|
|
|
+ title={
|
|
|
+ <Text style={{ color: '#061E25' }}>
|
|
|
+ 重新預約
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ onPress={() => console.log('abc')}
|
|
|
+ buttonPressedStyle={{
|
|
|
+ backgroundColor: '#CFDEE4'
|
|
|
+ }}
|
|
|
+ extendedStyle={{
|
|
|
+ backgroundColor: '#E3F2F8',
|
|
|
+ paddingHorizontal: 25,
|
|
|
+ paddingVertical: 1,
|
|
|
+ borderRadius: 8
|
|
|
+ }}
|
|
|
+ />
|
|
|
</View>
|
|
|
- </ScrollView>
|
|
|
- </View>
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
</View>
|
|
|
-
|
|
|
- <View className="min-h-[30vh]">
|
|
|
- <View className="mt-6 mb-4">
|
|
|
+ </View>
|
|
|
+ <View className="basis-1/3">
|
|
|
+ <View className="mt-6 mb-4">
|
|
|
+ <NormalButton
|
|
|
+ onPress={() => console.log('掃瞄及充電')}
|
|
|
+ title={
|
|
|
+ <Text className="text-white font-bold text-lg">
|
|
|
+ 掃瞄及充電
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ extendedStyle={{
|
|
|
+ alignItems: 'flex-start',
|
|
|
+ padding: 24
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className="flex-1 flex-row justify-between gap-6">
|
|
|
+ <View className="flex-1">
|
|
|
<NormalButton
|
|
|
- onPress={() => console.log('掃瞄及充電')}
|
|
|
+ onPress={() => console.log('我的預約')}
|
|
|
title={
|
|
|
<Text className="text-white font-bold text-lg">
|
|
|
- 掃瞄及充電
|
|
|
+ 我的預約
|
|
|
</Text>
|
|
|
}
|
|
|
extendedStyle={{
|
|
|
@@ -352,50 +363,23 @@ const HomePage: React.FC<HomePageProps> = () => {
|
|
|
}}
|
|
|
/>
|
|
|
</View>
|
|
|
- <View className="flex-1 flex-row justify-between gap-6">
|
|
|
- <View className="flex-1">
|
|
|
- <NormalButton
|
|
|
- onPress={() => console.log('我的預約')}
|
|
|
- title={
|
|
|
- <Text className="text-white font-bold text-lg">
|
|
|
- 我的預約
|
|
|
- </Text>
|
|
|
- }
|
|
|
- extendedStyle={{
|
|
|
- alignItems: 'flex-start',
|
|
|
- padding: 24
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View className="flex-1">
|
|
|
- <NormalButton
|
|
|
- onPress={() => console.log('我的車輛')}
|
|
|
- title={
|
|
|
- <Text className="text-white font-bold text-lg">
|
|
|
- 我的車輛
|
|
|
- </Text>
|
|
|
- }
|
|
|
- extendedStyle={{
|
|
|
- alignItems: 'flex-start',
|
|
|
- padding: 24
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
+ <View className="flex-1">
|
|
|
+ <NormalButton
|
|
|
+ onPress={() => console.log('我的車輛')}
|
|
|
+ title={
|
|
|
+ <Text className="text-white font-bold text-lg">
|
|
|
+ 我的車輛
|
|
|
+ </Text>
|
|
|
+ }
|
|
|
+ extendedStyle={{
|
|
|
+ alignItems: 'flex-start',
|
|
|
+ padding: 24
|
|
|
+ }}
|
|
|
+ />
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
- </ScrollView>
|
|
|
+ </View>
|
|
|
);
|
|
|
};
|
|
|
export default HomePage;
|
|
|
-
|
|
|
-const styles = StyleSheet.create({
|
|
|
- recentBookingMainContainer: {
|
|
|
- flex: 1,
|
|
|
- maxHeight: 240
|
|
|
- },
|
|
|
- recentBookingRowContainer: {
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center'
|
|
|
- }
|
|
|
-});
|
Ian Fung