filter, haptik, background

components/ui/ShowCard.tsx

@@ -3,7 +3,7 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
 type ShowCardProps = {
   imageUri: string;
-  streamingServiceUri: string;
+  streamingServicesUris: string[];
   liveBadgeText?: string;
   liveBadgeContainerStyle?: object;
   genres: string[];
@@ -13,7 +13,7 @@ type ShowCardProps = {
 
 const ShowCard = ({
   imageUri,
-  streamingServiceUri,
+  streamingServicesUris,
   liveBadgeText,
   liveBadgeContainerStyle,
   genres,
@@ -32,14 +32,20 @@ const ShowCard = ({
         }}
         style={[StyleSheet.absoluteFillObject, { borderRadius: 35 }]}
       />
-      <View style={styles.streamingServiceIcon}>
-        <Image
-          source={{
-            uri: streamingServiceUri,
-          }}
-          style={[StyleSheet.absoluteFillObject, { borderRadius: 15 }]}
-        />
+
+      <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'flex-end', padding: 10, gap: 5}}>
+        {streamingServicesUris.length > 0 && streamingServicesUris.map((service) => (
+          <Image
+            key={service}
+            source={{
+              uri: service,
+            }}
+            style={{ height: 45, width: 45, resizeMode: 'contain', borderRadius: 100}}
+          />
+
+        ))}
       </View>
+
       {liveBadgeText && (
         <View style={liveBadgeContainerStyle}>
           <Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
@@ -70,8 +76,8 @@ const ShowCard = ({
 
 const styles = StyleSheet.create({
   showContainer: {
-    width: "90%",
-    height: 200,
+    width: "100%",
+    height: 220,
     backgroundColor: "transparent",
     alignSelf: "center",
     borderRadius: 35,