style: added new screens and designs

components/ui/ShowCard.tsx

@@ -7,6 +7,7 @@ type ShowCardProps = {
   liveBadgeText?: string;
   liveBadgeContainerStyle?: object;
   genres: string[];
+  title: string;
   onPress?: () => void;
 };
 
@@ -17,6 +18,7 @@ const ShowCard = ({
   liveBadgeContainerStyle,
   genres,
   onPress,
+  title,
 }: ShowCardProps) => {
   return (
     <TouchableOpacity
@@ -43,6 +45,18 @@ const ShowCard = ({
           <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}>
@@ -98,7 +112,7 @@ const styles = StyleSheet.create({
   },
   genreSection: {
     position: "absolute",
-    bottom: 12,
+    bottom: 15,
     left: 20,
     flexDirection: "row",
     alignItems: "center",
@@ -116,6 +130,18 @@ const styles = StyleSheet.create({
     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;

components/ui/StackHeader.tsx

@@ -0,0 +1,54 @@
+import Feather from "@expo/vector-icons/Feather";
+import { router, useLocalSearchParams } from "expo-router";
+import React from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export default function StackHeader() {
+  const { title } = useLocalSearchParams();
+
+  return (
+    <View style={styles.header}>
+      <TouchableOpacity onPress={() => router.back()}>
+        <Feather name="arrow-left" size={26} color="white" />
+      </TouchableOpacity>
+      <Text style={styles.title}>{title}</Text>
+      <TouchableOpacity>
+        <Feather name="share" size={26} color="white" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    height: 125,
+    backgroundColor: "hsl(221, 39%, 12%)",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    paddingTop: Dimensions.get("window").height * 0.065,
+    paddingHorizontal: 20,
+
+    borderBottomColor: "hsl(221, 39%, 15%)",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    color: "white",
+    fontSize: 22,
+    fontWeight: "bold",
+  },
+});