style: added ShowCard component

app/(tabs)/explore.tsx

@@ -1,6 +1,6 @@
+import styles from "@/app/styles/indexStyles";
 import React from "react";
 import { Text, View } from "react-native";
-import styles from "@/app/indexStyles";
 
 export default function TabTwoScreen() {
   return (

app/(tabs)/index.tsx

@@ -1,24 +1,24 @@
+import styles from "@/app/styles/indexStyles";
+import ShowCard from "@/components/ui/ShowCard";
+import { router } from "expo-router";
 import React from "react";
-import { Text, View, Image } from "react-native";
-import styles from "@/app/indexStyles";
+import { Text, View } from "react-native";
 
 export default function HomeScreen() {
   return (
     <View style={styles.mainContainer}>
       <View style={styles.header}>
         <Text style={styles.title}>FLTR</Text>
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            backgroundColor: "red",
-            width: "75%",
-          }}
-        >
-          <Text style={styles.categoryLabel}>Live TV</Text>
-          <Text>Hello</Text>
-        </View>
       </View>
+
+      <ShowCard
+        onPress={() => router.push("/showDetails")}
+        imageUri="https://streamcoimg-a.akamaihd.net/000/123/147/123147-Banner-L2-b81d3e6b4df34af2887f701eec382f87.jpg"
+        streamingServiceUri="https://play-lh.googleusercontent.com/e8u4F0ED6hDMzmjg5cV_C5Sxrzr3xECniwKCD2Q8QfUeVMVRLG41TrsnqroTE7uxk4E=w240-h480-rw"
+        liveBadgeText="LIVE"
+        liveBadgeContainerStyle={styles.liveBadgeContainer}
+        genres={["Reality", "Dating"]}
+      />
     </View>
   );
 }

app/_layout.tsx

@@ -5,6 +5,12 @@ export default function RootLayout() {
   return (
     <Stack>
       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="showDetails"
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack>
   );
 }

app/showDetails.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View } from "react-native";
+
+export default function ShowDetails() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "hsl(221, 39%, 12%)",
+      }}
+    ></View>
+  );
+}

app/styles/indexStyles.tsx

@@ -6,14 +6,16 @@ export default StyleSheet.create({
     backgroundColor: "hsl(221, 39%, 11%)",
   },
   header: {
-    height: 135,
+    height: 125,
     backgroundColor: "hsl(221, 39%, 12%)",
     alignItems: "center",
     justifyContent: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: "hsl(221, 39%, 15%)",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 2,
+      height: 3,
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
@@ -26,20 +28,13 @@ export default StyleSheet.create({
     marginTop: "auto",
     marginBottom: 15,
   },
-  categoryLabel: {
-    color: "white",
-    fontSize: 14,
-    fontWeight: "bold",
-  },
-  logo: {
-    width: 50,
-    height: 45,
-    marginTop: "auto",
-    marginBottom: 15,
-    resizeMode: "contain",
+  liveBadgeContainer: {
+    position: "absolute",
+    top: 15,
+    left: 20,
     backgroundColor: "red",
-    padding: 5,
     borderRadius: 10,
-    marginLeft: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
   },
 });