124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import { Season, Show } from "@/app/types";
|
|
import GenreTag from "@/components/discovery/GenreTag";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
export default function ShowBox({
|
|
show,
|
|
displayedSeason,
|
|
shadow = true,
|
|
}: {
|
|
show: Show;
|
|
displayedSeason?: Season;
|
|
shadow?: boolean;
|
|
}) {
|
|
const navigation = useNavigation();
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("ShowDetail", { show })}
|
|
style={
|
|
!shadow
|
|
? [styles.showContainer, { backgroundColor: "#1b1e2b", paddingBottom: 0 }]
|
|
: [styles.showContainer, styles.shadow, { backgroundColor: "#1b1e2b" }]
|
|
}
|
|
>
|
|
<View style={styles.showImageContainer}>
|
|
<Image source={{ uri: show.thumbnailUrl }} style={styles.showImage} />
|
|
{show.running && <Text style={styles.runningTag}>LIVE</Text>}
|
|
</View>
|
|
|
|
<View style={styles.showRight}>
|
|
<Text style={styles.showTitle}>{show.title}</Text>
|
|
|
|
{displayedSeason ? (
|
|
<Text style={{ fontWeight: "bold", color: "#aac0ce" }}>
|
|
Staffel {displayedSeason.seasonNumber} (
|
|
{new Date(displayedSeason.startDate).getFullYear()})
|
|
</Text>
|
|
) : null}
|
|
|
|
<Text style={styles.showDescription} numberOfLines={8} ellipsizeMode="tail">
|
|
{show.description}
|
|
</Text>
|
|
|
|
<View style={styles.showGenreTagContainer}>
|
|
{show.genre.split(", ").map((genre: any) => (
|
|
<GenreTag key={genre}>{genre}</GenreTag>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
showTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
textAlign: "left",
|
|
color: "#ffffff",
|
|
},
|
|
showDescription: {
|
|
marginTop: 5,
|
|
fontSize: 12,
|
|
textAlign: "left",
|
|
flex: 1,
|
|
color: "#cccccc",
|
|
},
|
|
showContainer: {
|
|
width: "100%",
|
|
height: 220,
|
|
alignItems: "center",
|
|
padding: 10,
|
|
borderRadius: 10,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
backgroundColor: "#1b1e2b",
|
|
},
|
|
shadow: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
showImageContainer: {
|
|
width: 140,
|
|
height: "100%",
|
|
backgroundColor: "#2b2e3b",
|
|
borderRadius: 10,
|
|
},
|
|
showImage: {
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: 10,
|
|
},
|
|
showRight: {
|
|
flex: 1,
|
|
height: "100%",
|
|
flexDirection: "column",
|
|
backgroundColor: "#1b1e2b",
|
|
paddingLeft: 10,
|
|
paddingVertical: 2,
|
|
},
|
|
showGenreTagContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
flexWrap: "wrap",
|
|
gap: 5,
|
|
marginTop: 2,
|
|
backgroundColor: "#1b1e2b",
|
|
},
|
|
runningTag: {
|
|
position: "absolute",
|
|
top: 3,
|
|
left: 3,
|
|
backgroundColor: "red",
|
|
opacity: 0.65,
|
|
color: "white",
|
|
padding: 5,
|
|
borderRadius: 90,
|
|
},
|
|
});
|