69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
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,
|
|
},
|
|
});
|