cập nhật thông tin cảng trong modal add/edit trip, tối ưu lại UI modal add/edit trip

components/diary/TripFormModal/FormSection.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { View, Text, StyleSheet, Platform } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useThemeContext } from "@/hooks/use-theme-context";
+
+interface FormSectionProps {
+  title: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  children: React.ReactNode;
+}
+
+/**
+ * A styled section wrapper for grouping related form fields
+ */
+export default function FormSection({ title, icon, children }: FormSectionProps) {
+  const { colors } = useThemeContext();
+
+  return (
+    <View style={[styles.container, { borderColor: colors.separator }]}>
+      <View style={styles.header}>
+        {icon && (
+          <Ionicons name={icon} size={18} color={colors.primary} style={styles.icon} />
+        )}
+        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+      </View>
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+    borderBottomWidth: 1,
+    paddingBottom: 16,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "700",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  content: {
+    gap: 0,
+  },
+});