mirror of
https://github.com/movie-web/native-app.git
synced 2025-09-13 12:53:24 +00:00
replace all stylesheets with tailwind classes
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user