update tab diary

components/diary/SearchBar.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { View, TextInput, StyleSheet, Platform, StyleProp, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+interface SearchBarProps {
+  onSearch?: (text: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function SearchBar({ onSearch, style }: SearchBarProps) {
+  const [searchText, setSearchText] = useState("");
+
+  const handleChangeText = (text: string) => {
+    setSearchText(text);
+    onSearch?.(text);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <Ionicons name="search" size={20} color="#9CA3AF" style={styles.icon} />
+      <TextInput
+        style={styles.input}
+        placeholder="Tìm kiếm chuyến đi, tàu..."
+        placeholderTextColor="#9CA3AF"
+        value={searchText}
+        onChangeText={handleChangeText}
+      />
+      {searchText.length > 0 && (
+        <Ionicons
+          name="close-circle"
+          size={20}
+          color="#9CA3AF"
+          style={styles.clearIcon}
+          onPress={() => handleChangeText("")}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+  },
+  icon: {
+    marginRight: 8,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: "#111827",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  clearIcon: {
+    marginLeft: 8,
+  },
+});