feat: add genres to movies and episodes

components/GenreTags.tsx

@@ -0,0 +1,25 @@
+// GenreTags.tsx
+import React from "react";
+import { View } from "react-native";
+import { Text } from "./common/Text";
+
+interface GenreTagsProps {
+  genres?: string[];
+}
+
+export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {
+  if (!genres || genres.length === 0) return null;
+
+  return (
+    <View className="flex flex-row flex-wrap mt-2">
+      {genres.map((genre) => (
+        <View
+          key={genre}
+          className="bg-neutral-800 rounded-full px-2 py-1 mr-1"
+        >
+          <Text className="text-xs">{genre}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};

components/ItemHeader.tsx

@@ -3,6 +3,7 @@ import { View, ViewProps } from "react-native";
 import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { Ratings } from "./Ratings";
 import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
+import { GenreTags } from "./GenreTags";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -12,7 +13,7 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
   if (!item)
     return (
       <View
-        className="flex flex-col space-y-1.5 w-full items-start h-24"
+        className="flex flex-col space-y-1.5 w-full items-start h-32"
         {...props}
       >
         <View className="w-1/3 h-6 bg-neutral-900 rounded" />
@@ -23,16 +24,22 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
     );
 
   return (
-    <View
-      style={{
-        minHeight: 96,
-      }}
-      className="flex flex-col"
-      {...props}
-    >
-      <Ratings item={item} className="mb-2" />
-      {item.Type === "Episode" && <EpisodeTitleHeader item={item} />}
-      {item.Type === "Movie" && <MoviesTitleHeader item={item} />}
+    <View className="flex flex-col" {...props}>
+      <View className="flex flex-col" {...props}>
+        <Ratings item={item} className="mb-2" />
+        {item.Type === "Episode" && (
+          <>
+            <EpisodeTitleHeader item={item} />
+            <GenreTags genres={item.Genres!} />
+          </>
+        )}
+        {item.Type === "Movie" && (
+          <>
+            <MoviesTitleHeader item={item} />
+            <GenreTags genres={item.Genres!} />
+          </>
+        )}
+      </View>
     </View>
   );
 };