search

2025-10-23 17:58:16 +02:00
parent 52f2e241a7
commit f21f20a4fd
9 changed files with 566 additions and 108 deletions
--- a/components/discovery/ShowBox.tsx
+++ b/components/discovery/ShowBox.tsx
@@ -0,0 +1,123 @@
+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,
+  },
+});