filter: add streaming service filter option

app/(tabs)/index.tsx

@@ -4,7 +4,13 @@ import { useShowContext } from "@/contexts/ShowContext";
 import { useStreamingServiceContext } from "@/contexts/StreamingServiceContext";
 import { router } from "expo-router";
 import React from "react";
-import { ActivityIndicator, Text, View } from "react-native";
+import {
+  ActivityIndicator,
+  Text,
+  TouchableOpacity,
+  View,
+  Image,
+} from "react-native";
 import {
   GestureHandlerRootView,
   ScrollView,
@@ -13,6 +19,32 @@ import {
 export default function HomeScreen() {
   const { shows, error, loading } = useShowContext();
   const { streamingServices } = useStreamingServiceContext();
+  const [filteredShows, setFilteredShows] = React.useState(shows);
+
+  React.useEffect(() => {
+    setFilteredShows(shows);
+  }, [shows]);
+
+  const handleFilter = (type: string) => {
+    if (type === "all") {
+      setFilteredShows(shows);
+      return;
+    }
+
+    if (type === "live") {
+      const filtered = shows.filter((show) => show.running);
+      setFilteredShows(filtered);
+      return;
+    }
+
+    const filtered = shows.filter((show) => show.streamingService === type);
+    setFilteredShows(filtered);
+  };
+
+  const uniqueStreamingServices = React.useMemo(() => {
+    const uniqueServices = new Set(shows.map((show) => show.streamingService));
+    return Array.from(uniqueServices);
+  }, [shows]);
 
   if (loading) {
     return (
@@ -47,7 +79,46 @@ export default function HomeScreen() {
           <Text style={styles.title}>FLTR</Text>
         </View>
         <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
-          {shows.map((show) => {
+          <View style={styles.filterSection}>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                alignItems: "center",
+                paddingHorizontal: 10,
+                gap: 10,
+              }}
+            >
+              {uniqueStreamingServices.map((serviceName) => {
+                const streamingService =
+                  streamingServices[
+                    `assets.images.streamingServices.${serviceName.toLowerCase()}`
+                  ];
+                return (
+                  <TouchableOpacity
+                    key={serviceName}
+                    style={{
+                      padding: 5,
+                      backgroundColor: "hsl(221, 39%, 80%)",
+                      borderRadius: 50,
+                    }}
+                    onPress={() => handleFilter(serviceName)}
+                  >
+                    <Image
+                      source={{ uri: streamingService }}
+                      style={{
+                        width: 45,
+                        height: 45,
+                        borderRadius: 30,
+                        resizeMode: "contain",
+                      }}
+                    />
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
+          </View>
+          {filteredShows.map((show) => {
             const showLiveBadge = show.running;
             const streamingService =
               streamingServices[

app/tabStyles/indexStyles.tsx

@@ -37,4 +37,10 @@ export default StyleSheet.create({
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
+  filterSection: {
+    width: "100%",
+    height: 70,
+    backgroundColor: "hsl(221, 39%, 5%)",
+    marginTop: 20,
+  },
 });