related-ui-components 1.6.5 → 1.6.7

package/src/app.tsx

@@ -1,150 +1,30 @@
-import React, { useRef, useState } from "react";
-import {
-  View,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  FlatList,
-  Alert,
-  Modal, // Import Modal
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { RelatedProvider, useTheme } from "./theme";
-import {
-  Banner,
-  Filters,
-  Popup,
-  RedemptionOption,
-  ScratchCard, // Your component
-  ScratchCardContent,
-  UnlockRewards,
-} from "./components";
-import { SafeAreaView } from "react-native-safe-area-context";
-// ... other imports
-import { GestureHandlerRootView } from "react-native-gesture-handler"; // Ensure import
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { FilterResult, Filters } from './components';
+import BRANDS from './constants/BRANDS';
 
-export default function App() {
-  const { theme } = useTheme();
-  // ... other state and constants
+const MyScreen = () => {
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
 
-  // State to control modal visibility
-  const [isScratchModalVisible, setScratchModalVisible] = useState(false); // Example state
+  const handleApplyFilters = (result: FilterResult) => {
+    console.log("Filters applied:", result);
+    // Process filter results...
+  };
 
   return (
-    // Root view for the main app
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <RelatedProvider>
-        <SafeAreaView
-          style={{ flex: 1, padding: 10, backgroundColor: theme.background }}
-        >
-          {/* Example Button to open the modal */}
-          <TouchableOpacity
-            onPress={() => setScratchModalVisible(true)}
-            style={styles.testButton}
-          >
-            <Text style={styles.buttonText}>Show Scratch Card Modal</Text>
-          </TouchableOpacity>
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Show Filters" onPress={() => setIsFilterVisible(true)} />
 
-          {/* --- The Modal --- */}
-          <Modal
-            visible={isScratchModalVisible}
-            onRequestClose={() => setScratchModalVisible(false)} // Allow closing
-            transparent={true} // Example: make it transparent
-            animationType="slide" // Example animation
-          >
-            {/* Root view specifically for the modal's content */}
-            <GestureHandlerRootView style={styles.modalRootView}>
-              {/* Optional: Add a background overlay */}
-              <View style={styles.modalOverlay}>
-                {/* Center the card or position as needed */}
-                <View style={styles.modalContentContainer}>
-                  <ScratchCard
-                    backgroundColor="#8A2BE2"
-                    text="Scratch to reveal your prize!"
-                    textFontColor="#FFFFFF"
-                    textFontSize={18}
-                    width={300}
-                    height={150}
-                    onScratched={() => {
-                      Alert.alert("Congratulations!", "You won a prize!");
-                      // Optionally close modal after scratching
-                      // setTimeout(() => setScratchModalVisible(false), 500);
-                    }}
-                  >
-                    <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
-                      <Text
-                        style={{
-                          fontSize: 24,
-                          fontWeight: "bold",
-                          color: "#000",
-                        }}
-                      >
-                        50% OFF COUPON
-                      </Text>
-                      <Text style={{ marginTop: 8, color: "#333" }}>
-                        Use code: SCRATCH50
-                      </Text>
-                    </ScratchCardContent>
-                  </ScratchCard>
-
-                  {/* Button to close the modal */}
-                  <TouchableOpacity
-                    onPress={() => setScratchModalVisible(false)}
-                    style={styles.closeButton}
-                  >
-                    <Text style={styles.buttonText}>Close</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            </GestureHandlerRootView>
-          </Modal>
-
-          {/* Other app content can go here */}
-        </SafeAreaView>
-      </RelatedProvider>
-    </GestureHandlerRootView>
+      <Filters
+        visible={isFilterVisible}
+        onClose={() => setIsFilterVisible(false)} // Pass the function to close the modal
+        onActionButtonPress={handleApplyFilters}
+        // ... other filter props (sortOptions, brands, etc.)
+        sortOptions={[/* your sort options */]}
+        brands={BRANDS}
+      />
+    </View>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  // ... your existing styles
-  testButton: {
-    backgroundColor: "#4a90e2",
-    paddingVertical: 12,
-    paddingHorizontal: 30,
-    borderRadius: 8,
-    marginBottom: 20,
-    alignSelf: "center",
-  },
-  buttonText: {
-    color: "#FFFFFF",
-    fontSize: 16,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  // Styles for the Modal
-  modalRootView: {
-    flex: 1, // Important for the root view to take up space
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
-    justifyContent: "center", // Center content vertically
-    alignItems: "center", // Center content horizontally
-  },
-  modalContentContainer: {
-    // Optional: Add padding or background to the content area if needed
-    // backgroundColor: 'white',
-    // padding: 20,
-    // borderRadius: 10,
-    alignItems: "center", // Center items like the close button
-  },
-  closeButton: {
-    marginTop: 20,
-    backgroundColor: "#d9534f",
-    paddingVertical: 10,
-    paddingHorizontal: 25,
-    borderRadius: 8,
-  },
-});
+export default MyScreen;