diff --git a/components/GenreTags.tsx b/components/GenreTags.tsx new file mode 100644 index 00000000..07155b8c --- /dev/null +++ b/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 = ({ genres }) => { + if (!genres || genres.length === 0) return null; + + return ( + + {genres.map((genre) => ( + + {genre} + + ))} + + ); +}; diff --git a/components/ItemHeader.tsx b/components/ItemHeader.tsx index dcffe023..74d29725 100644 --- a/components/ItemHeader.tsx +++ b/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 = ({ item, ...props }) => { if (!item) return ( @@ -23,16 +24,22 @@ export const ItemHeader: React.FC = ({ item, ...props }) => { ); return ( - - - {item.Type === "Episode" && } - {item.Type === "Movie" && } + + + + {item.Type === "Episode" && ( + <> + + + + )} + {item.Type === "Movie" && ( + <> + + + + )} + ); };