aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/search/Explore.tsx73
-rw-r--r--src/components/search/SearchBar.tsx46
-rw-r--r--src/components/search/SearchHeader.tsx8
3 files changed, 75 insertions, 52 deletions
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index 2a3bc749..54bbe4b5 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -1,20 +1,30 @@
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
-import {useSelector} from 'react-redux';
-import {EXPLORE_SECTION_TITLES} from '../../constants';
-import {RootState} from '../../store/rootReducer';
-import {ExploreSectionType} from '../../types';
-import {normalize} from '../../utils';
-import ExploreSection from './ExploreSection';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH} from '../../utils';
const Explore: React.FC = () => {
- const {explores} = useSelector((state: RootState) => state.taggUsers);
+ // Get categories from backend
+ const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24'];
+
return (
<View style={styles.container}>
- <Text style={styles.header}>Search Profiles</Text>
- {explores &&
- EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
- <ExploreSection key={title} title={title} users={explores[title]} />
+ {categories &&
+ categories.map((category) => (
+ <LinearGradient
+ colors={['#8000FF', '#00FFFF']}
+ start={{x: 0.0, y: 1.0}}
+ end={{x: 1.0, y: 1.0}}
+ style={styles.gradientContainer}>
+ <TouchableOpacity
+ style={styles.buttonContainer}
+ onPress={() => {
+ console.log('Navigate to Discover Users!');
+ }}>
+ <Text style={styles.buttonText}>{category}</Text>
+ </TouchableOpacity>
+ </LinearGradient>
))}
</View>
);
@@ -23,13 +33,42 @@ const Explore: React.FC = () => {
const styles = StyleSheet.create({
container: {
zIndex: 0,
+ top: '3%',
+ alignSelf: 'center',
+ flexDirection: 'row',
+ width: SCREEN_WIDTH * 0.9,
+ flexWrap: 'wrap',
+ justifyContent: 'space-evenly',
+ },
+ gradientContainer: {
+ width: 159,
+ height: 38,
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginVertical: '2.5%',
+ flexDirection: 'row',
+ alignContent: 'center',
+ borderRadius: 20,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ },
+ buttonContainer: {
+ backgroundColor: 'white',
+ width: 158,
+ height: 37,
+ borderRadius: 20,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ flexDirection: 'row',
+ alignContent: 'center',
+ justifyContent: 'center',
},
- header: {
- fontWeight: '700',
- fontSize: normalize(22),
- color: '#fff',
- marginBottom: '2%',
- margin: '5%',
+ buttonText: {
+ fontWeight: '400',
+ fontSize: 15,
+ lineHeight: 17.9,
+ alignSelf: 'center',
+ color: '#828282',
},
});
export default Explore;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..dce1b40c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,9 @@ import {
NativeSyntheticEvent,
TextInputSubmitEditingEventData,
} from 'react-native';
-import Animated, {
- interpolate,
- interpolateColors,
-} from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import Animated from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/Feather';
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+import {normalize} from 'react-native-elements';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -31,21 +26,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
onChangeText,
value,
onCancel,
- top,
style,
}) => {
- const opacity: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [0, 1],
- });
- const marginRight: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [0, 57],
- });
- const color: Animated.Node<number> = interpolateColors(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputColorRange: ['#fff', '#000'],
- });
const handleSubmit = (
e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
) => {
@@ -55,17 +37,17 @@ const SearchBar: React.FC<SearchBarProps> = ({
return (
<View style={[styles.container, style]}>
- <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+ <Animated.View style={[styles.inputContainer]}>
<AnimatedIcon
name="search"
- color={color}
+ color={'#7E7E7E'}
size={25}
style={styles.searchIcon}
/>
- <AnimatedTextInput
- style={[styles.input, {color}]}
- placeholder={'Search...'}
- placeholderTextColor={'#fff'}
+ <TextInput
+ style={[styles.input]}
+ placeholder={'Search'}
+ placeholderTextColor={'#828282'}
onSubmitEditing={handleSubmit}
clearButtonMode="while-editing"
autoCapitalize="none"
@@ -73,11 +55,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
{...{value, onChangeText, onFocus, onBlur}}
/>
</Animated.View>
- <Animated.View style={{opacity, marginRight}}>
+ <View style={styles.cancelButtonView}>
<TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
<Text style={styles.cancelText}>Cancel</Text>
</TouchableOpacity>
- </Animated.View>
+ </View>
</View>
);
};
@@ -86,6 +68,7 @@ const styles = StyleSheet.create({
container: {
height: 40,
flexDirection: 'row',
+ justifyContent: 'center',
alignItems: 'stretch',
zIndex: 2,
},
@@ -94,9 +77,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
- borderWidth: 1.5,
borderRadius: 20,
- backgroundColor: '#fff3',
+ backgroundColor: '#F0F0F0',
},
searchIcon: {
marginRight: 8,
@@ -104,8 +86,10 @@ const styles = StyleSheet.create({
input: {
flex: 1,
fontSize: 16,
- color: '#fff',
+ color: '#828282',
+ letterSpacing: normalize(0.5),
},
+ cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
cancelButton: {
position: 'absolute',
height: '100%',
diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
index 2a022f50..0d9f5973 100644
--- a/src/components/search/SearchHeader.tsx
+++ b/src/components/search/SearchHeader.tsx
@@ -25,17 +25,17 @@ const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
});
return (
<View style={[styles.container, style]}>
- <View style={styles.headerContainer}>
+ {/* <View style={styles.headerContainer}>
<Animated.Text
style={[styles.header, {opacity: exploreOpacity, color}]}>
Explore
</Animated.Text>
- </View>
- <View style={styles.headerContainer}>
+ </View> */}
+ {/* <View style={styles.headerContainer}>
<Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
Search
</Animated.Text>
- </View>
+ </View> */}
</View>
);
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 01:32:08 +0000