implemened filter and header

AFK-AlignedFamKernel · Feb 24, 2025 · 6a05831 · 6a05831
1 parent 6d0d307
commit 6a05831
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 91 deletions.
diff --git a/apps/mobile/src/components/Dialog/index.tsx b/apps/mobile/src/components/Dialog/index.tsx
@@ -9,7 +9,7 @@ import stylesheet from './styles';
 
 export type DialogProps = {
   title: string;
-
+  description: string;
   icon?: React.ReactNode;
   buttons: {
     label: string;
@@ -18,7 +18,7 @@ export type DialogProps = {
   }[];
 };
 
-export const Dialog: React.FC<DialogProps> = ({title, icon,  buttons}) => {
+export const Dialog: React.FC<DialogProps> = ({title, icon, description, buttons}) => {
   const styles = useStyles(stylesheet);
 
   return (
@@ -30,7 +30,9 @@ export const Dialog: React.FC<DialogProps> = ({title, icon,  buttons}) => {
           {title}
         </Text>
 
-
+        <Text weight="semiBold" color="textSecondary" align="center" fontSize={15} lineHeight={20}>
+          {description}
+        </Text>
       </View>
 
       <View style={styles.buttons}>

diff --git a/apps/mobile/src/components/Filter/index.tsx b/apps/mobile/src/components/Filter/index.tsx
@@ -35,16 +35,8 @@ const NDK_KIND_OPTIONS = [
   { label: 'Video shorts', value: NDKKind.VerticalVideo },
 ];
 
-// const SORT_OPTIONS = [
-//   {label: 'Time', value: 'time'},
-//   {label: 'For You', value: 'forYou'},
-//   {label: 'Trending', value: 'trending'},
-// ];
-
 const SORT_OPTIONS = [
   { label: 'Time', value: SORT_OPTION_EVENT_NOSTR.TIME },
-  // {label: 'For You', value: SORT_OPTION_EVENT_NOSTR.FOR_YOU},
-  // {label: 'Trending', value: SORT_OPTION_EVENT_NOSTR.TRENDING},
 ];
 
 const FilterMenu: React.FC<IFilterMenuProps> = ({
@@ -73,59 +65,33 @@ const FilterMenu: React.FC<IFilterMenuProps> = ({
 
   return (
     <Modal visible={visible} transparent={true} animationType="slide">
-      {/* <Pressable onPress={onClose} style={styles.closeButton}>
-        <Text style={styles.closeButtonText}>Close</Text>
-      </Pressable> */}
       <View style={styles.modalContainer}>
-        {/* <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-          <Text style={styles.closeButtonText}>Close</Text>
-        </TouchableOpacity> */}
         <View style={containerStyle}>
           <TouchableOpacity onPress={onClose} style={styles.closeButton}>
             <Text style={styles.closeButtonText}>Close</Text>
           </TouchableOpacity>
           <ScrollView>
-            {/* 
-            <Text style={styles.sectionTitle}>Sort By</Text>
-            
-            <View style={styles.rowContainer}>
-              {SORT_OPTIONS.map((option) => (
+            <Text style={styles.sectionTitle}>Filter By Type</Text>
+            <View style={styles.containerSort}>
+              {NDK_KIND_OPTIONS.map((option) => (
                 <Pressable
                   key={option.value}
                   style={[
                     styles.button,
-                    activeSortBy === option.value.toString() && styles.activeButton,
+                    kinds.includes(option.value) && styles.activeButton,
+                    width > 768 ? styles.itemDesktop : styles.item,
                   ]}
-                  onPress={() => onSortChange(option.value.toString())}
+                  onPress={() => toggleKindSelection(option.value)}
                 >
                   <Text style={styles.buttonText}>{option.label}</Text>
                 </Pressable>
               ))}
-            </View> */}
-
-            <Text style={styles.sectionTitle}>Filter By Type</Text>
-            <ScrollView style={styles.containerSort}>
-              {/* <View style={styles.containerSort}> */}
-                {NDK_KIND_OPTIONS.map((option) => (
-                  <Pressable
-                    key={option.value}
-                    style={[styles.button, kinds.includes(option.value) && styles.activeButton]}
-                    onPress={() => toggleKindSelection(option.value)}
-                  >
-                    <Text style={styles.buttonText}>{option.label}</Text>
-                  </Pressable>
-                ))}
-              {/* </View> */}
-            </ScrollView>
-
+            </View>
           </ScrollView>
-          {/* <Pressable onPress={onClose} style={styles.closeButton}>
-            <Text style={styles.closeButtonText}>Close</Text>
-          </Pressable> */}
         </View>
       </View>
     </Modal>
   );
 };
 
-export default FilterMenu;
+export default FilterMenu;
diff --git a/apps/mobile/src/components/Filter/styles.ts b/apps/mobile/src/components/Filter/styles.ts
@@ -1,10 +1,9 @@
 import { StyleSheet } from 'react-native';
-
 import { Spacing, ThemedStyleSheet, Typography } from '../../styles';
 
 export default ThemedStyleSheet((theme) => ({
   modalContainer: {
-    flex: 2,
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -14,62 +13,40 @@ export default ThemedStyleSheet((theme) => ({
     backgroundColor: theme.colors.surface,
     borderRadius: 12,
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
+    shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.8,
     shadowRadius: 2,
     elevation: 5,
     display: 'flex',
-    // gridTemplateRows: 'repeat(2, 1fr)', // Creates 2 equal-height rows
-    // rowGap: 12, // Vertical gap between rows
-    // columnGap: 12, // Horizontal gap between columns
-    // alignItems: 'center',
+    height: '90%',
   },
   containerSort: {
     padding: Spacing.pagePadding,
     backgroundColor: theme.colors.surface,
     borderRadius: 12,
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
+    shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.8,
     shadowRadius: 2,
     elevation: 5,
     display: 'flex',
-    height: '70%',
-    // gridTemplateRows: 'repeat(2, 1fr)', // Creates 2 equal-height rows
-    // rowGap: 12, // Vertical gap between rows
-    // columnGap: 12, // Horizontal gap between columns
-    // alignItems: 'center',
+    height: '90%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  item: {
+    flexBasis: '100%', // Default to 100% width (1 column)
+    marginBottom: Spacing.small,
+  },
+  itemDesktop: {
+    flexBasis: '45%', // 2 columns on desktop
+    marginTop:10
   },
-  // container: {
-  //   padding: Spacing.pagePadding,
-  //   backgroundColor: theme.colors.surface,
-  //   borderRadius: 12,
-  //   shadowColor: '#000',
-  //   shadowOffset: { width: 0, height: 2 },
-  //   shadowOpacity: 0.8,
-  //   shadowRadius: 2,
-  //   elevation: 5,
-  //   gridTemplateColumns: 'repeat(2, 1fr)', // Creates 2 equal-width columns
-  //   columnGap: 12, // Horizontal gap between columns
-  //   rowGap: 12, // Vertical gap between rows
-  //   alignItems: 'center',
-  // },
   rowContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap', // Allow wrapping if items overflow
-    justifyContent: 'space-between', // Adjust spacing between items
-    // },
-    // display: 'grid',
-    // gridTemplateColumns: 'repeat(2, 1fr)', // Creates 2 equal-width columns
-    // columnGap: 12, // Horizontal gap between columns
-    // rowGap: 12, // Vertical gap between rows
-    // alignItems: 'center',
+    justifyContent: 'space-between',
   },
-  // rowContainer: {
-  //   flexDirection: 'row',
-  //   flexWrap: 'wrap', // Allow wrapping if items overflow
-  //   justifyContent: 'space-between', // Adjust spacing between items
-  // },
   button: {
     paddingVertical: Spacing.small,
     paddingHorizontal: Spacing.large,
@@ -78,12 +55,13 @@ export default ThemedStyleSheet((theme) => ({
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: theme.colors.divider,
     marginBottom: Spacing.small,
-    marginRight: Spacing.small, // Add spacing between items
+    marginRight: Spacing.small,
     justifyContent: 'center',
     alignItems: 'center',
+
   },
   activeButton: {
-    backgroundColor: theme.colors.primary, // Active button background color
+    backgroundColor: theme.colors.primary,
   },
   buttonText: {
     color: theme.colors.text,
@@ -92,10 +70,9 @@ export default ThemedStyleSheet((theme) => ({
   closeButton: {
     paddingVertical: Spacing.small,
     paddingHorizontal: Spacing.large,
-    // backgroundColor: theme.colors.primary,
     borderRadius: 8,
     marginTop: Spacing.small,
-    backgroundColor:theme.colors.background
+    backgroundColor: theme.colors.background,
   },
   closeButtonText: {
     color: theme.colors.text,
@@ -110,4 +87,4 @@ export default ThemedStyleSheet((theme) => ({
     fontSize: 18,
     ...Typography.bold,
   },
-}));
+}));
diff --git a/apps/mobile/src/components/search/styles.ts b/apps/mobile/src/components/search/styles.ts
@@ -13,6 +13,7 @@ export default ThemedStyleSheet((theme) => ({
     marginHorizontal: 32,
     gap: 10,
     marginVertical: 30,
+
     // overflowX: 'auto',
   },
   containerMobile: {
@@ -64,8 +65,11 @@ export default ThemedStyleSheet((theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
     color: theme.colors.textPrimary,
-    opacity: 0.7
+    opacity: 0.7,
+marginRight:5,
+marginBottom:14
   },
+
   activeButton: {
     opacity: 1,
     backgroundColor: theme.colors.primary,