66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
useColorScheme,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
interface SearchBarProps {
|
|
placeholder?: string;
|
|
onSearch?: (text: string) => void;
|
|
}
|
|
|
|
export default function SearchBar({
|
|
placeholder = "Search…",
|
|
onSearch,
|
|
}: SearchBarProps) {
|
|
const [query, setQuery] = useState("");
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
|
|
const handleChange = (text: string) => {
|
|
setQuery(text);
|
|
onSearch?.(text);
|
|
};
|
|
|
|
return (
|
|
<View
|
|
className={`
|
|
flex-row items-center mx-4 my-3 px-4 rounded-2xl h-11
|
|
${dark
|
|
? "bg-obsidian-100 border border-border-dark"
|
|
: "bg-parchment-100 border border-border-light"
|
|
}
|
|
`}
|
|
>
|
|
<Ionicons
|
|
name="search"
|
|
size={16}
|
|
color={dark ? "#706D67" : "#8A8278"}
|
|
style={{ marginRight: 8 }}
|
|
/>
|
|
<TextInput
|
|
className={`flex-1 text-sm font-sans ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
placeholderTextColor={dark ? "#706D67" : "#8A8278"}
|
|
placeholder={placeholder}
|
|
value={query}
|
|
onChangeText={handleChange}
|
|
returnKeyType="search"
|
|
clearButtonMode="while-editing"
|
|
/>
|
|
{query.length > 0 && (
|
|
<TouchableOpacity onPress={() => handleChange("")} hitSlop={8}>
|
|
<Ionicons
|
|
name="close-circle"
|
|
size={16}
|
|
color={dark ? "#706D67" : "#8A8278"}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
} |