diff --git a/front/packages/primitives/src/chip.tsx b/front/packages/primitives/src/chip.tsx index a2e75a5a..2488dd00 100644 --- a/front/packages/primitives/src/chip.tsx +++ b/front/packages/primitives/src/chip.tsx @@ -22,17 +22,24 @@ import { rem, Stylable, Theme, useYoshiki } from "yoshiki/native"; import { P } from "./text"; import { ts } from "./utils"; -export const Chip = ({ label, color, ...props }: { label: string; color?: string } & Stylable) => { +export const Chip = ({ + label, + color, + size = "medium", + ...props +}: { label: string; color?: string; size?: "small" | "medium" | "large" } & Stylable) => { const { css } = useYoshiki(); + const sizeMult = size == "medium" ? 1 : size == "small" ? 0.75 : 1.25; + return (

theme.contrast, bg: color ?? ((theme: Theme) => theme.accent), }, diff --git a/front/packages/primitives/src/text.tsx b/front/packages/primitives/src/text.tsx index c8cdfdca..7e5dda2c 100644 --- a/front/packages/primitives/src/text.tsx +++ b/front/packages/primitives/src/text.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { ComponentType, ComponentProps } from "react"; +import { ComponentType, ComponentProps, ReactNode } from "react"; import { Platform, Text, TextProps, TextStyle, StyleProp } from "react-native"; import { percent, rem, useYoshiki } from "yoshiki/native"; import { @@ -37,7 +37,7 @@ const styleText = ( type?: "header" | "sub", custom?: TextStyle, ) => { - const Text = (props: Omit, "style"> & { style?: StyleProp }) => { + const Text = (props: Omit, "style"> & { style?: StyleProp, children?: TextProps["children"] }) => { const { css, theme } = useYoshiki(); return ( diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx index 310d7637..5e1654b4 100644 --- a/front/packages/ui/src/details/header.tsx +++ b/front/packages/ui/src/details/header.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio } from "@kyoo/models"; +import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio, KyooImage } from "@kyoo/models"; import { Container, H1, @@ -37,11 +37,11 @@ import { LI, A, ts, - Button, + Chip, } from "@kyoo/primitives"; import { Fragment } from "react"; import { useTranslation } from "react-i18next"; -import { Platform, Pressable, PressableProps, View } from "react-native"; +import { Platform, View } from "react-native"; import { Theme, md, @@ -73,7 +73,7 @@ const TitleLine = ({ slug: string; name?: string; date?: string; - poster?: string | null; + poster?: KyooImage | null; studio?: Studio | null; trailerUrl?: string | null; } & Stylable) => { @@ -99,12 +99,13 @@ const TitleLine = ({ @@ -227,11 +228,13 @@ const TitleLine = ({ const Description = ({ isLoading, overview, + tags, genres, ...props }: { isLoading: boolean; overview?: string | null; + tags?: string[]; genres?: Genre[]; } & Stylable) => { const { t } = useTranslation(); @@ -249,40 +252,40 @@ const Description = ({ })} > {t("show.genre")}:{" "} - {(isLoading ? [...Array(3)] : genres!).map((genre, i) => ( - + {(isLoading ? [...Array(3)] : genres!).map((genre, i) => ( +

{i !== 0 && ", "}

{isLoading ? ( ) : ( - {genre.name} + {genre} )} ))}

- - {isLoading || ( -

- {overview ?? t("show.noOverview")} -

- )} -
+ + + {isLoading || ( +

+ {overview ?? t("show.noOverview")} +

+ )} +
+ +

{t("show.tags")}:

+ {(isLoading ? [...Array(3)] : tags!).map((tag, i) => ( + + ))} +
+

{t("show.genre")} {isLoading || genres?.length ? (