From 9da89e6b907641934d926a64613bffb8f60dc208 Mon Sep 17 00:00:00 2001
From: Cron1cle <118773725+Cron1cle@users.noreply.github.com>
Date: Mon, 6 Oct 2025 19:50:23 +0200
Subject: [PATCH] style: added ParticipantDeatails component

---
 app/showDetails.tsx                | 17 ++++-----
 components/ParticipantDeatails.tsx | 55 ++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 components/ParticipantDeatails.tsx

diff --git a/app/showDetails.tsx b/app/showDetails.tsx
index 9ff5cc6..e6b3df8 100644
--- a/app/showDetails.tsx
+++ b/app/showDetails.tsx
@@ -1,6 +1,7 @@
 import StackHeader from "@/components/ui/StackHeader";
 import { useLocalSearchParams, router } from "expo-router";
 import ShowInfo from "@/components/ui/ShowInfo";
+import ParticipantDetails from "@/components/ParticipantDeatails";
 import React from "react";
 import {
   Dimensions,
@@ -200,16 +201,12 @@ export default function ShowDetails() {
             </View>
           </>
         ) : (
-          <View style={styles.participantsDetailsContainer}>
-            <Text style={styles.detailTitle}>Beschreibung:</Text>
-            <Text style={styles.detailLabel}>{description}</Text>
-            <Text style={styles.detailTitle}>Konzept:</Text>
-            <Text style={styles.detailLabel}>{concept}</Text>
-            <Text style={styles.detailTitle}>Genres:</Text>
-            <Text style={styles.detailLabel}>{genres}</Text>
-            <Text style={styles.detailTitle}>Produktion:</Text>
-            <Text style={styles.detailLabel}>{streamingService}</Text>
-          </View>
+          <ParticipantDetails
+            description={description as string}
+            concept={concept as string}
+            genres={genres as string}
+            streamingService={streamingService as string}
+          />
         )}
       </ScrollView>
     </View>
diff --git a/components/ParticipantDeatails.tsx b/components/ParticipantDeatails.tsx
new file mode 100644
index 0000000..fde5314
--- /dev/null
+++ b/components/ParticipantDeatails.tsx
@@ -0,0 +1,55 @@
+import { View, Text, StyleSheet } from "react-native";
+
+type ParticipantDetailsProps = {
+  description: string;
+  concept: string;
+  genres: string;
+  streamingService: string;
+};
+
+const ParticipantDetails = ({
+  description,
+  concept,
+  genres,
+  streamingService,
+}: ParticipantDetailsProps) => {
+  return (
+    <View style={styles.participantsDetailsContainer}>
+      <Text style={styles.detailTitle}>Beschreibung:</Text>
+      <Text style={styles.detailLabel}>{description}</Text>
+      <Text style={styles.detailTitle}>Konzept:</Text>
+      <Text style={styles.detailLabel}>{concept}</Text>
+      <Text style={styles.detailTitle}>Genres:</Text>
+      <Text style={styles.detailLabel}>{genres}</Text>
+      <Text style={styles.detailTitle}>Produktion:</Text>
+      <Text style={styles.detailLabel}>{streamingService}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantsDetailsContainer: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "hsl(221, 39%, 2%)",
+  },
+  detailTitle: {
+    color: "hsl(0, 0%, 100%)",
+    fontSize: 14,
+    fontWeight: "bold",
+    marginTop: 10,
+    marginLeft: 20,
+    marginBottom: 5,
+  },
+  detailLabel: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 14,
+    lineHeight: 20,
+    width: "90%",
+    fontWeight: "300",
+    marginLeft: 20,
+    marginTop: 5,
+  },
+});
+
+export default ParticipantDetails;