From 4fda7c77ab71c79a399fe89f047b95c265ac2583 Mon Sep 17 00:00:00 2001 From: MinhNN Date: Thu, 30 Oct 2025 16:32:11 +0700 Subject: [PATCH] them icon --- app/(tabs)/_layout.tsx | 15 ++- app/(tabs)/explore.tsx | 82 +++++++++------- app/(tabs)/tripInfo.tsx | 22 +++++ components/tripInfo/TripCostTable.styles.ts | 60 ++++++++++++ components/tripInfo/TripCostTable.tsx | 100 ++++++++++++++++++++ components/ui/icon-symbol.tsx | 32 +++++-- git-auto-push.sh | 6 +- 7 files changed, 267 insertions(+), 50 deletions(-) create mode 100644 app/(tabs)/tripInfo.tsx create mode 100644 components/tripInfo/TripCostTable.styles.ts create mode 100644 components/tripInfo/TripCostTable.tsx diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 23f86f2..58a78dc 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -20,21 +20,30 @@ export default function TabLayout() { ( - + ), }} /> ( ), }} /> + ( + + ), + }} + /> - }> + } + > + }} + > Explore - This app includes example code to help you get started. + + This app includes example code to help you get started. + - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} + This app has two screens:{" "} + app/(tabs)/index.tsx{" "} + and{" "} app/(tabs)/explore.tsx - The layout file in app/(tabs)/_layout.tsx{' '} + The layout file in{" "} + app/(tabs)/_layout.tsx{" "} sets up the tab navigator. @@ -47,19 +53,21 @@ export default function TabTwoScreen() { - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. + You can open this project on Android, iOS, and the web. To open the + web version, press w{" "} + in the terminal running this project. - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities + For static images, you can use the{" "} + @2x and{" "} + @3x suffixes to + provide files for different screen densities Learn more @@ -67,9 +75,10 @@ export default function TabTwoScreen() { - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. + This template has light and dark mode support. The{" "} + useColorScheme() hook + lets you inspect what the user's current color scheme is, and so + you can adjust UI colors accordingly. Learn more @@ -77,18 +86,23 @@ export default function TabTwoScreen() { - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful{' '} + This template includes an example of an animated component. The{" "} + + components/HelloWave.tsx + {" "} + component uses the powerful{" "} react-native-reanimated - {' '} + {" "} library to create a waving hand animation. {Platform.select({ ios: ( - The components/ParallaxScrollView.tsx{' '} + The{" "} + + components/ParallaxScrollView.tsx + {" "} component provides a parallax effect for the header image. ), @@ -100,13 +114,13 @@ export default function TabTwoScreen() { const styles = StyleSheet.create({ headerImage: { - color: '#808080', + color: "#808080", bottom: -90, left: -35, - position: 'absolute', + position: "absolute", }, titleContainer: { - flexDirection: 'row', + flexDirection: "row", gap: 8, }, }); diff --git a/app/(tabs)/tripInfo.tsx b/app/(tabs)/tripInfo.tsx new file mode 100644 index 0000000..98e810a --- /dev/null +++ b/app/(tabs)/tripInfo.tsx @@ -0,0 +1,22 @@ +import { ThemedText } from "@/components/themed-text"; +import { ThemedView } from "@/components/themed-view"; +import TripCostTable from "@/components/tripInfo/TripCostTable"; +import { StyleSheet } from "react-native"; + +export default function TripInfoScreen() { + return ( + + Thông Tin Chuyến Đi + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + padding: 20, + }, +}); diff --git a/components/tripInfo/TripCostTable.styles.ts b/components/tripInfo/TripCostTable.styles.ts new file mode 100644 index 0000000..50d1d2b --- /dev/null +++ b/components/tripInfo/TripCostTable.styles.ts @@ -0,0 +1,60 @@ +import { StyleSheet } from "react-native"; + +const styles = StyleSheet.create({ + container: { + width: "100%", + margin: 16, + padding: 16, + borderRadius: 12, + backgroundColor: "#fff", + shadowColor: "#000", + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 2, + }, + title: { + fontSize: 18, + fontWeight: "700", + textAlign: "center", + marginBottom: 12, + }, + row: { + flexDirection: "row", + borderBottomWidth: 0.5, + borderColor: "#ddd", + paddingVertical: 8, + }, + cell: { + flex: 1, + textAlign: "center", + fontSize: 14, + }, + left: { + textAlign: "left", + }, + header: { + backgroundColor: "#f8f8f8", + borderTopWidth: 1, + borderBottomWidth: 1, + }, + headerText: { + fontWeight: "600", + }, + highlight: { + color: "#ff6600", + fontWeight: "600", + }, + footer: { + marginTop: 6, + }, + footerText: { + fontWeight: "600", + color: "#007bff", + }, + total: { + color: "#007bff", + fontWeight: "700", + }, +}); + +export default styles; diff --git a/components/tripInfo/TripCostTable.tsx b/components/tripInfo/TripCostTable.tsx new file mode 100644 index 0000000..6b76190 --- /dev/null +++ b/components/tripInfo/TripCostTable.tsx @@ -0,0 +1,100 @@ +import React from "react"; +import { FlatList, ListRenderItem, Text, View } from "react-native"; +import styles from "./TripCostTable.styles"; + +// --------------------------- +// 🧩 Interface +// --------------------------- +interface CostItem { + id: string; + loai: string; + soLuong: number; + donVi: string; + chiPhi: number; + tongChiPhi: number; +} + +// --------------------------- +// 📊 Dữ liệu mẫu +// --------------------------- +const data: CostItem[] = [ + { + id: "1", + loai: "Nhiên liệu", + soLuong: 1000, + donVi: "liters", + chiPhi: 20000, + tongChiPhi: 20000000, + }, + { + id: "2", + loai: "Lương thực", + soLuong: 500, + donVi: "kg", + chiPhi: 30000, + tongChiPhi: 15000000, + }, + { + id: "3", + loai: "Lương thuyền viên", + soLuong: 10, + donVi: "people", + chiPhi: 5000000, + tongChiPhi: 50000000, + }, + { + id: "4", + loai: "Muối đá", + soLuong: 100, + donVi: "kg", + chiPhi: 20000, + tongChiPhi: 2000000, + }, +]; + +// --------------------------- +// 💰 Component chính +// --------------------------- +const TripCostTable: React.FC = () => { + const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0); + + const renderItem: ListRenderItem = ({ item }) => ( + + {item.loai} + + {item.tongChiPhi.toLocaleString()} + + + ); + + return ( + + Chi phí chuyến đi + + {/* Header */} + + Loại + Tổng chi phí + + + {/* Body */} + item.id} + /> + + {/* Footer */} + + + Tổng cộng + + + {tongCong.toLocaleString()} + + + + ); +}; + +export default TripCostTable; diff --git a/components/ui/icon-symbol.tsx b/components/ui/icon-symbol.tsx index b7ece6b..3e87ae4 100644 --- a/components/ui/icon-symbol.tsx +++ b/components/ui/icon-symbol.tsx @@ -1,11 +1,14 @@ // Fallback for using MaterialIcons on Android and web. -import MaterialIcons from '@expo/vector-icons/MaterialIcons'; -import { SymbolWeight, SymbolViewProps } from 'expo-symbols'; -import { ComponentProps } from 'react'; -import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native'; +import MaterialIcons from "@expo/vector-icons/MaterialIcons"; +import { SymbolViewProps, SymbolWeight } from "expo-symbols"; +import { ComponentProps } from "react"; +import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native"; -type IconMapping = Record['name']>; +type IconMapping = Record< + SymbolViewProps["name"], + ComponentProps["name"] +>; type IconSymbolName = keyof typeof MAPPING; /** @@ -14,10 +17,12 @@ type IconSymbolName = keyof typeof MAPPING; * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app. */ const MAPPING = { - 'house.fill': 'home', - 'paperplane.fill': 'send', - 'chevron.left.forwardslash.chevron.right': 'code', - 'chevron.right': 'chevron-right', + "house.fill": "home", + "paperplane.fill": "send", + "chevron.left.forwardslash.chevron.right": "code", + "chevron.right": "chevron-right", + "ferry.fill": "directions-boat", + "map.fill": "map", } as IconMapping; /** @@ -37,5 +42,12 @@ export function IconSymbol({ style?: StyleProp; weight?: SymbolWeight; }) { - return ; + return ( + + ); } diff --git a/git-auto-push.sh b/git-auto-push.sh index 24e0608..c7ba618 100755 --- a/git-auto-push.sh +++ b/git-auto-push.sh @@ -25,9 +25,9 @@ if [ -z "$current_branch" ]; then fi echo "👉 Bạn đang ở nhánh: $current_branch" -# Hỏi nhánh chính, mặc định là 'main' nếu người dùng không nhập -read -p "Nhập tên nhánh chính (mặc định: main): " target_branch -target_branch=${target_branch:-main} +# Hỏi nhánh chính, mặc định là 'master' nếu người dùng không nhập +read -p "Nhập tên nhánh chính (mặc định: master): " target_branch +target_branch=${target_branch:-master} # Kiểm tra xem nhánh chính có tồn tại trên remote không if ! git ls-remote --heads origin "$target_branch" >/dev/null 2>&1; then