Ref/homepage code refactor issue 60

src/components/home/FilterBar.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius, typography } from '../../utils/constants';
+
+interface FilterBarProps {
+  searchQuery: string;
+  setSearchQuery: (text: string) => void;
+  onFilterPress: () => void;
+  hasActiveFilters: boolean;
+  activeFilterCount: number;
+}
+
+export const FilterBar: React.FC<FilterBarProps> = ({
+  searchQuery,
+  setSearchQuery,
+  onFilterPress,
+  hasActiveFilters,
+  activeFilterCount,
+}) => {
+  return (
+    <View style={styles.searchFilterBar}>
+      <View style={styles.searchContainer}>
+        <Text style={styles.searchIcon}>🔍</Text>
+        <TextInput
+          style={styles.searchInput}
+          placeholder="Search subscriptions..."
+          placeholderTextColor={colors.textSecondary}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+        />
+        {searchQuery.length > 0 && (
+          <TouchableOpacity onPress={() => setSearchQuery('')}>
+            <Text style={styles.clearSearchIcon}>✕</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <TouchableOpacity
+        style={[styles.filterButton, hasActiveFilters && styles.filterButtonActive]}
+        onPress={onFilterPress}>
+        <Text style={styles.filterIcon}>🔧</Text>
+        {hasActiveFilters && (
+          <View style={styles.filterBadge}>
+            <Text style={styles.filterBadgeText}>{activeFilterCount}</Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchFilterBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: spacing.md,
+    gap: spacing.sm,
+  },
+  searchContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.surface,
+    borderRadius: borderRadius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  searchIcon: {
+    fontSize: 16,
+    marginRight: spacing.sm,
+    color: colors.textSecondary,
+  },
+  searchInput: {
+    flex: 1,
+    color: colors.text,
+    ...typography.body,
+  },
+  clearSearchIcon: {
+    fontSize: 16,
+    color: colors.textSecondary,
+    padding: spacing.xs,
+  },
+  filterButton: {
+    backgroundColor: colors.surface,
+    borderRadius: borderRadius.md,
+    padding: spacing.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  filterButtonActive: {
+    backgroundColor: colors.primary,
+    borderColor: colors.primary,
+  },
+  filterIcon: {
+    fontSize: 18,
+    color: colors.text,
+  },
+  filterBadge: {
+    position: 'absolute',
+    top: -5,
+    right: -5,
+    backgroundColor: colors.error,
+    borderRadius: borderRadius.full,
+    minWidth: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xs,
+  },
+  filterBadgeText: {
+    ...typography.caption,
+    color: colors.text,
+    fontWeight: '600',
+    fontSize: 10,
+  },
+});