148 lines
3.1 KiB
TypeScript
148 lines
3.1 KiB
TypeScript
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[];
|
|
title: string;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
const ShowCard = ({
|
|
imageUri,
|
|
streamingServiceUri,
|
|
liveBadgeText,
|
|
liveBadgeContainerStyle,
|
|
genres,
|
|
onPress,
|
|
title,
|
|
}: 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>
|
|
{liveBadgeText && (
|
|
<View style={liveBadgeContainerStyle}>
|
|
<Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.titleSection}>
|
|
<Text
|
|
style={{
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
{title}
|
|
</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: 15,
|
|
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, 1)",
|
|
overflow: "hidden",
|
|
},
|
|
titleSection: {
|
|
width: "auto",
|
|
height: 45,
|
|
paddingHorizontal: 20,
|
|
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
position: "absolute",
|
|
top: 50,
|
|
justifyContent: "center",
|
|
alignItems: "flex-start",
|
|
borderTopRightRadius: 15,
|
|
borderBottomRightRadius: 15,
|
|
},
|
|
});
|
|
|
|
export default ShowCard;
|