Added theme components. Reorganized them. Prepping for Tech Tracker Rewrite

This commit is contained in:
2025-03-04 16:55:45 -06:00
parent fb577e81db
commit 4775917db0
20 changed files with 595 additions and 72 deletions

View File

@@ -0,0 +1,62 @@
import React from 'react';
import { StyleSheet, ViewProps, View, DimensionValue } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ThemedTextInput } from '@/components/theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
type ThemedSearchBarProps = ViewProps & {
placeholder?: string;
value: string;
onChangeText: (text: string) => void;
width?: DimensionValue;
height?: number;
};
const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
placeholder = 'Search',
value,
onChangeText,
width = '100%',
height = 40,
style,
...restProps
}) => {
const scheme = useColorScheme() ?? 'dark';
return (
<View style={[styles.container, { width }, style]} {...restProps}>
<Ionicons
name="search"
size={20}
color={Colors[scheme].text}
style={styles.icon}
/>
<ThemedTextInput
placeholder={placeholder}
value={value}
onChangeText={onChangeText}
height={height}
width={width}
style={styles.input}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
},
icon: {
position: 'absolute',
zIndex: 1,
left: 15,
},
input: {
paddingLeft: 45,
},
});
export default ThemedSearchBar;