aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/profile/Content.tsx7
-rw-r--r--src/components/search/DiscoverUsers.tsx8
-rw-r--r--src/components/search/Explore.tsx35
-rw-r--r--src/components/search/SearchBar.tsx97
-rw-r--r--src/components/search/SearchCategories.tsx89
-rw-r--r--src/components/search/SearchHeader.tsx60
-rw-r--r--src/components/search/index.ts3
7 files changed, 143 insertions, 156 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index ae9f9564..d4c50d5c 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -109,10 +109,9 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
false,
);
- const [
- isStageThreePromptClosed,
- setIsStageThreePromptClosed,
- ] = useState<boolean>(false);
+ const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
+ boolean
+ >(false);
const onRefresh = useCallback(() => {
const refrestState = async () => {
diff --git a/src/components/search/DiscoverUsers.tsx b/src/components/search/DiscoverUsers.tsx
index ec0a8daa..93fcb02d 100644
--- a/src/components/search/DiscoverUsers.tsx
+++ b/src/components/search/DiscoverUsers.tsx
@@ -1,11 +1,5 @@
import React from 'react';
-import {
- View,
- Text,
- TouchableOpacity,
- StyleSheet,
- TouchableOpacityProps,
-} from 'react-native';
+import {View, Text, StyleSheet, TouchableOpacityProps} from 'react-native';
import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
import SearchResults from './SearchResults';
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
deleted file mode 100644
index 2a3bc749..00000000
--- a/src/components/search/Explore.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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';
-
-const Explore: React.FC = () => {
- const {explores} = useSelector((state: RootState) => state.taggUsers);
- 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]} />
- ))}
- </View>
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- zIndex: 0,
- },
- header: {
- fontWeight: '700',
- fontSize: normalize(22),
- color: '#fff',
- marginBottom: '2%',
- margin: '5%',
- },
-});
-export default Explore;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..be0eecc7 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,10 @@ 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';
+import {SCREEN_WIDTH} from '../../utils';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -31,21 +27,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>,
) => {
@@ -54,31 +37,36 @@ const SearchBar: React.FC<SearchBarProps> = ({
};
return (
- <View style={[styles.container, style]}>
- <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
- <AnimatedIcon
- name="search"
- color={color}
- size={25}
- style={styles.searchIcon}
- />
- <AnimatedTextInput
- style={[styles.input, {color}]}
- placeholder={'Search...'}
- placeholderTextColor={'#fff'}
- onSubmitEditing={handleSubmit}
- clearButtonMode="while-editing"
- autoCapitalize="none"
- autoCorrect={false}
- {...{value, onChangeText, onFocus, onBlur}}
- />
- </Animated.View>
- <Animated.View style={{opacity, marginRight}}>
- <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
- <Text style={styles.cancelText}>Cancel</Text>
- </TouchableOpacity>
- </Animated.View>
- </View>
+ <>
+ <View style={[styles.container, style]}>
+ <Animated.View style={[styles.inputContainer]}>
+ <AnimatedIcon
+ name="search"
+ color={'#7E7E7E'}
+ size={25}
+ style={styles.searchIcon}
+ />
+ <TextInput
+ style={[styles.input]}
+ placeholder={'Search'}
+ placeholderTextColor={'#828282'}
+ onSubmitEditing={handleSubmit}
+ clearButtonMode="while-editing"
+ autoCapitalize="none"
+ autoCorrect={false}
+ {...{value, onChangeText, onFocus, onBlur}}
+ />
+ </Animated.View>
+ <View style={styles.cancelButtonView}>
+ <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+ <Text style={styles.cancelText}>Cancel</Text>
+ </TouchableOpacity>
+ </View>
+ </View>
+ <Text style={styles.helperText}>
+ Try searching for "trending on tagg"
+ </Text>
+ </>
);
};
@@ -86,6 +74,7 @@ const styles = StyleSheet.create({
container: {
height: 40,
flexDirection: 'row',
+ justifyContent: 'center',
alignItems: 'stretch',
zIndex: 2,
},
@@ -94,9 +83,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 +92,10 @@ const styles = StyleSheet.create({
input: {
flex: 1,
fontSize: 16,
- color: '#fff',
+ color: '#000',
+ letterSpacing: normalize(0.5),
},
+ cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
cancelButton: {
position: 'absolute',
height: '100%',
@@ -116,6 +106,17 @@ const styles = StyleSheet.create({
color: '#818181',
fontWeight: '600',
},
+ helperText: {
+ fontWeight: '400',
+ fontSize: 14,
+ lineHeight: normalize(16.71),
+ color: '#828282',
+ marginBottom: '2%',
+ marginHorizontal: '2.5%',
+ marginTop: '1%',
+ textAlign: 'center',
+ width: SCREEN_WIDTH * 0.74,
+ },
});
export default SearchBar;
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
new file mode 100644
index 00000000..3096b343
--- /dev/null
+++ b/src/components/search/SearchCategories.tsx
@@ -0,0 +1,89 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {getButtons} from '../../services/ExploreService';
+import {SearchCategoryType} from 'src/types';
+import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
+import {SCREEN_WIDTH} from '../../utils';
+
+const SearchCategories: React.FC = () => {
+ const [buttons, setButtons] = useState<SearchCategoryType[]>([]);
+ useEffect(() => {
+ const loadButtons = async () => {
+ const localButtons = await getButtons();
+ console.log('localButtons: ', localButtons);
+ await setButtons(localButtons);
+ };
+ loadButtons();
+ }, []);
+
+ const navigation = useNavigation();
+ return (
+ <View style={styles.container}>
+ {buttons &&
+ buttons.map((searchCategory) => (
+ <LinearGradient
+ colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
+ start={{x: 0.0, y: 1.0}}
+ end={{x: 1.0, y: 1.0}}
+ style={styles.gradientContainer}>
+ <TouchableOpacity
+ style={styles.buttonContainer}
+ key={searchCategory.id}
+ onPress={() => {
+ navigation.navigate('DiscoverUsers', {
+ searchCategory,
+ });
+ }}>
+ <Text style={styles.buttonText}>{searchCategory.name}</Text>
+ </TouchableOpacity>
+ </LinearGradient>
+ ))}
+ </View>
+ );
+};
+
+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',
+ },
+ buttonText: {
+ fontWeight: '400',
+ fontSize: 15,
+ lineHeight: 17.9,
+ alignSelf: 'center',
+ color: '#828282',
+ },
+});
+export default SearchCategories;
diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
deleted file mode 100644
index 2a022f50..00000000
--- a/src/components/search/SearchHeader.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import {SCREEN_HEIGHT} from '../../utils';
-import {View, StyleSheet, ViewProps} from 'react-native';
-import Animated, {
- Value,
- interpolateColors,
- interpolate,
-} from 'react-native-reanimated';
-
-interface SearchHeaderProps extends ViewProps {
- top: Value<number>;
-}
-const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
- const color: Animated.Node<number> = interpolateColors(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputColorRange: ['#fff', '#000'],
- });
- const searchOpacity: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [0, 1],
- });
- const exploreOpacity: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [1, 0],
- });
- return (
- <View style={[styles.container, style]}>
- <View style={styles.headerContainer}>
- <Animated.Text
- style={[styles.header, {opacity: exploreOpacity, color}]}>
- Explore
- </Animated.Text>
- </View>
- <View style={styles.headerContainer}>
- <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
- Search
- </Animated.Text>
- </View>
- </View>
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- flexDirection: 'row',
- justifyContent: 'center',
- height: 30,
- },
- headerContainer: {
- position: 'absolute',
- left: '50%',
- },
- header: {
- position: 'relative',
- right: '50%%',
- fontSize: 24,
- fontWeight: 'bold',
- },
-});
-export default SearchHeader;
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
index 7418f0ba..a6289232 100644
--- a/src/components/search/index.ts
+++ b/src/components/search/index.ts
@@ -1,7 +1,6 @@
export {default as SearchBackground} from './SearchBackground';
-export {default as SearchHeader} from './SearchHeader';
export {default as SearchBar} from './SearchBar';
-export {default as Explore} from './Explore';
+export {default as SearchCategories} from './SearchCategories';
export {default as SearchResultsBackground} from './SearchResultsBackground';
export {default as SearchResultList} from './SearchResultList';
export {default as SearchResults} from './SearchResults';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:06:46 +0000