From 06e5f256a97b03b63970a5e2b55ca84190f803d0 Mon Sep 17 00:00:00 2001
From: Cron1cle <118773725+Cron1cle@users.noreply.github.com>
Date: Mon, 6 Oct 2025 19:46:32 +0200
Subject: [PATCH] added ShowInfo component to showDetails.tsx

---
 app/showDetails.tsx        | 13 +++++-----
 components/ui/ShowInfo.tsx | 49 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 components/ui/ShowInfo.tsx

diff --git a/app/showDetails.tsx b/app/showDetails.tsx
index 9e5cac5..9ff5cc6 100644
--- a/app/showDetails.tsx
+++ b/app/showDetails.tsx
@@ -1,5 +1,6 @@
 import StackHeader from "@/components/ui/StackHeader";
 import { useLocalSearchParams, router } from "expo-router";
+import ShowInfo from "@/components/ui/ShowInfo";
 import React from "react";
 import {
   Dimensions,
@@ -34,13 +35,11 @@ export default function ShowDetails() {
           }}
           style={styles.showImage}
         />
-        <View style={styles.showMainInfoSection}>
-          <Text style={styles.showInfoText}>10 Staffeln</Text>
-          <View style={styles.dot} />
-          <Text style={styles.showInfoText}>442 Teilnehmer</Text>
-          <View style={styles.dot} />
-          <Text style={styles.showInfoText}>RTL +</Text>
-        </View>
+        <ShowInfo
+          seasons={10}
+          participants={150}
+          streamingService={streamingService as string}
+        />
 
         <View style={styles.showBannerLogoContainer}>
           <Image
diff --git a/components/ui/ShowInfo.tsx b/components/ui/ShowInfo.tsx
new file mode 100644
index 0000000..145eb67
--- /dev/null
+++ b/components/ui/ShowInfo.tsx
@@ -0,0 +1,49 @@
+import { View, Text, StyleSheet } from "react-native";
+
+type ShowInfoProps = {
+  seasons: number;
+  participants: number;
+  streamingService: string;
+};
+
+const ShowInfo = ({
+  seasons,
+  participants,
+  streamingService,
+}: ShowInfoProps) => {
+  return (
+    <View style={styles.showMainInfoSection}>
+      <Text style={styles.showInfoText}>{seasons} Staffeln</Text>
+      <View style={styles.dot} />
+      <Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
+      <View style={styles.dot} />
+      <Text style={styles.showInfoText}>{streamingService}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  showMainInfoSection: {
+    width: "auto",
+    height: "auto",
+    alignSelf: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    bottom: 25,
+  },
+  showInfoText: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 14,
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 3,
+    backgroundColor: "hsl(0, 0%, 80%)",
+    marginHorizontal: 7,
+    marginTop: 2,
+  },
+});
+
+export default ShowInfo;