replace all stylesheets with tailwind classes

This commit is contained in:
Jorrin
2024-01-23 21:56:17 +01:00
parent 8a48a1cce4
commit 26a1b623e7
25 changed files with 148 additions and 285 deletions

View File

@@ -1,13 +1,13 @@
import { FontAwesome5 } from '@expo/vector-icons';
import { useFocusEffect } from 'expo-router';
import { useCallback, useRef, useState } from 'react';
import { View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import Colors from '../../../constants/Colors.js';
import { globalStyles } from '../../../styles/global';
import { StyledView } from '../../../components/ui/Styled';
import useTailwind from '../../hooks/useTailwind';
export default function Searchbar() {
const { colors } = useTailwind();
const [keyword, setKeyword] = useState('');
const inputRef = useRef<TextInput>(null);
@@ -25,19 +25,19 @@ export default function Searchbar() {
);
return (
<View className="mb-6 mt-4 flex-row items-center rounded-full border">
<View className="ml-1 w-12 items-center justify-center">
<FontAwesome5 name="search" size={18} color={Colors.shade[200]} />
</View>
<StyledView className="mb-6 mt-4 flex-row items-center rounded-full border">
<StyledView className="ml-1 w-12 items-center justify-center">
<FontAwesome5 name="search" size={18} color={colors.shade[200]} />
</StyledView>
<TextInput
value={keyword}
autoFocus
onChangeText={(text) => setKeyword(text)}
ref={inputRef}
placeholder="What are you looking for?"
placeholderTextColor={Colors.shade[200]}
className="rounded-3xl py-3 pr-5 text-white"
placeholderTextColor={colors.shade[200]}
className="w-full rounded-3xl py-3 pr-5 text-white"
/>
</View>
</StyledView>
);
}