cập nhật phần modal thêm chuyến đi mới

components/diary/addTripModal/TripNameInput.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Platform,
+} from "react-native";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+
+interface TripNameInputProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function TripNameInput({ value, onChange }: TripNameInputProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+
+  const themedStyles = {
+    label: { color: colors.text },
+    input: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      color: colors.text,
+    },
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, themedStyles.label]}>
+        {t("diary.tripNameLabel")}
+      </Text>
+      <TextInput
+        style={[styles.input, themedStyles.input]}
+        value={value}
+        onChangeText={onChange}
+        placeholder={t("diary.tripNamePlaceholder")}
+        placeholderTextColor={colors.textSecondary}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 8,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontSize: 16,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+});