filter, haptik, background

components/ParticipantDeatails.tsx

@@ -1,9 +1,9 @@
-import { View, Text, StyleSheet } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 type ParticipantDetailsProps = {
   description: string;
   concept: string;
-  genres: string;
+  genres: string[];
   streamingService: string;
 };
 
@@ -20,7 +20,7 @@ const ParticipantDetails = ({
       <Text style={styles.detailTitle}>Konzept:</Text>
       <Text style={styles.detailLabel}>{concept}</Text>
       <Text style={styles.detailTitle}>Genres:</Text>
-      <Text style={styles.detailLabel}>{genres}</Text>
+      <Text style={styles.detailLabel}>{genres.join(', ')}</Text>
       <Text style={styles.detailTitle}>Produktion:</Text>
       <Text style={styles.detailLabel}>{streamingService}</Text>
     </View>

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,

components/ui/StackHeader.tsx

@@ -20,9 +20,9 @@ export default function StackHeader() {
         <Feather name="arrow-left" size={26} color="white" />
       </TouchableOpacity>
       <Image style={styles.logo} source={{ uri: logoUriString }} />
-      <TouchableOpacity>
+      {/* <TouchableOpacity>
         <Feather name="share" size={26} color="white" />
-      </TouchableOpacity>
+      </TouchableOpacity> */}
     </View>
   );
 }