1 files changed, 39 insertions, 43 deletions

diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index c3c4c518..f00debb5 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -1,47 +1,55 @@
 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 {StyleSheet, View} from 'react-native';
+import {GradientBorderButton} from '..';
 import {getButtons} from '../../services/ExploreService';
 import {SearchCategoryType} from '../../types';
-import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
-const SearchCategories: React.FC = () => {
-  const [buttons, setButtons] = useState<SearchCategoryType[]>([]);
+interface SearchCategoriesProps {
+  darkStyle?: boolean;
+}
+
+const SearchCategories: React.FC<SearchCategoriesProps> = ({
+  darkStyle = false,
+}) => {
+  const navigation = useNavigation();
+  const mtSearchCategory: (key: number) => SearchCategoryType = (key) => ({
+    id: key,
+    name: '...',
+    category: '...',
+  });
+  const [buttons, setButtons] = useState<SearchCategoryType[]>([
+    mtSearchCategory(1),
+    mtSearchCategory(2),
+    mtSearchCategory(3),
+    mtSearchCategory(4),
+  ]);
   useEffect(() => {
     const loadButtons = async () => {
       const localButtons = await getButtons();
-      console.log('localButtons: ', localButtons);
-      await setButtons(localButtons);
+      setButtons([]);
+      setButtons(localButtons);
     };
     loadButtons();
   }, []);
 
-  const navigation = useNavigation();
   return (
     <View style={styles.container}>
-      {buttons &&
-        buttons.map((searchCategory) => (
-          <LinearGradient
-            key={searchCategory.id}
-            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>
-        ))}
+      {buttons.map((searchCategory) => (
+        <GradientBorderButton
+          key={searchCategory.id}
+          text={searchCategory.name}
+          darkStyle={darkStyle}
+          onPress={() => {
+            if (searchCategory.name !== '...') {
+              navigation.push('DiscoverUsers', {
+                searchCategory,
+              });
+            }
+          }}
+        />
+      ))}
     </View>
   );
 };
@@ -56,20 +64,8 @@ const styles = StyleSheet.create({
     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',
+    backgroundColor: 'transparent',
     width: 158,
     height: 37,
     borderRadius: 20,
@@ -84,7 +80,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 17.9,
     alignSelf: 'center',
-    color: '#828282',
+    color: 'white',
   },
 });
 export default SearchCategories;