style: added ShowCard component

components/ui/ShowCard.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+type ShowCardProps = {
+  imageUri: string;
+  streamingServiceUri: string;
+  liveBadgeText: string;
+  liveBadgeContainerStyle?: object;
+  genres: string[];
+  onPress?: () => void;
+};
+
+const ShowCard = ({
+  imageUri,
+  streamingServiceUri,
+  liveBadgeText,
+  liveBadgeContainerStyle,
+  genres,
+  onPress,
+}: ShowCardProps) => {
+  return (
+    <TouchableOpacity
+      style={styles.showContainer}
+      activeOpacity={0.3}
+      onPress={onPress}
+    >
+      <Image
+        source={{
+          uri: imageUri,
+        }}
+        style={[StyleSheet.absoluteFillObject, { borderRadius: 35 }]}
+      />
+      <View style={styles.streamingServiceIcon}>
+        <Image
+          source={{
+            uri: streamingServiceUri,
+          }}
+          style={[StyleSheet.absoluteFillObject, { borderRadius: 15 }]}
+        />
+      </View>
+
+      <View style={liveBadgeContainerStyle}>
+        <Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
+      </View>
+      <View style={styles.genreSection}>
+        {genres.map((genre) => (
+          <Text key={genre} style={styles.genreLabel}>
+            {genre}
+          </Text>
+        ))}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  showContainer: {
+    width: "90%",
+    height: 200,
+    backgroundColor: "transparent",
+    alignSelf: "center",
+    borderRadius: 35,
+    marginTop: 20,
+    borderWidth: 1.5,
+    borderColor: "hsl(221, 39%, 15%)",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+    elevation: 1,
+  },
+  streamingServiceIcon: {
+    width: 45,
+    height: 45,
+    marginLeft: "auto",
+    marginRight: 15,
+    borderWidth: 1,
+    borderColor: "white",
+    borderRadius: 15,
+    marginTop: 15,
+  },
+  liveBadgeContainer: {
+    position: "absolute",
+    top: 15,
+    left: 20,
+    backgroundColor: "red",
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+  liveBadgeText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+  genreSection: {
+    position: "absolute",
+    bottom: 12,
+    left: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly",
+    gap: 5,
+  },
+  genreLabel: {
+    color: "red",
+    fontWeight: "bold",
+    fontSize: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+    fontStyle: "italic",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    overflow: "hidden",
+  },
+});
+
+export default ShowCard;