diff --git a/front/src/primitives/chip.tsx b/front/src/primitives/chip.tsx index cc797430..4ecc25e0 100644 --- a/front/src/primitives/chip.tsx +++ b/front/src/primitives/chip.tsx @@ -20,7 +20,7 @@ export const Chip = ({ size?: "small" | "medium" | "large"; outline?: boolean; label: string; - href: string; + href: string | null; replace?: boolean; target?: string; textProps?: TextProps; diff --git a/front/src/ui/details/header.tsx b/front/src/ui/details/header.tsx index 5382a4da..11c1f166 100644 --- a/front/src/ui/details/header.tsx +++ b/front/src/ui/details/header.tsx @@ -22,7 +22,13 @@ import { } from "yoshiki/native"; import { WatchListInfo } from "~/components/items/watchlist-info"; import { Rating } from "~/components/rating"; -import { type Genre, type KImage, Show, type WatchStatusV } from "~/models"; +import { + type Genre, + type KImage, + Show, + type Studio, + type WatchStatusV, +} from "~/models"; import { A, Chip, @@ -159,7 +165,7 @@ export const TitleLine = ({ runtime, poster, trailerUrl, - // studio, + studios, watchStatus, ...props }: { @@ -173,7 +179,7 @@ export const TitleLine = ({ runtime: number | null; poster: KImage | null; trailerUrl: string | null; - // studio: Studio; + studios: Studio[] | null; watchStatus: WatchStatusV | null; } & Stylable) => { const { css, theme } = useYoshiki(); @@ -331,57 +337,56 @@ export const TitleLine = ({ - {/* */} - {/* {studio && ( */} - {/*

theme.user.paragraph, */} - {/* display: "flex", */} - {/* })} */} - {/* > */} - {/* {t("show.studio")}:{" "} */} - {/* theme.user.link })} */} - {/* > */} - {/* {studio.name} */} - {/* */} - {/*

*/} - {/* )} */} - {/*
*/} + + {studios?.map((x) => ( +

theme.user.paragraph, + display: "flex", + })} + > + {t("show.studio")}:{" "} + theme.user.link })} + > + {x.name} + +

+ ))} +
); }; const Description = ({ - isLoading, - overview, + description, tags, genres, ...props }: { - isLoading: boolean; - overview?: string | null; - tags?: string[]; - genres?: Genre[]; + description: string | null; + tags: string[]; + genres: Genre[]; } & Stylable) => { const { t } = useTranslation(); const { css } = useYoshiki(); @@ -401,16 +406,12 @@ const Description = ({ })} > {t("show.genre")}:{" "} - {(isLoading ? [...Array(3)] : genres!).map((genre, i) => ( - -

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

- {isLoading ? ( - - ) : ( - - {t(`genres.${genre}`)} - - )} + {genres.map((genre, i) => ( + +

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

+ + {t(`genres.${genre}`)} +
))}

@@ -423,13 +424,9 @@ const Description = ({ paddingTop: ts(4), })} > - - {isLoading || ( -

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

- )} -
+

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

{t("show.tags")}:

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

{t("show.genre")}

- {isLoading || genres?.length ? ( + {genres.length ? ( @@ -530,7 +523,7 @@ export const Header = ({ rating={data.rating} runtime={data.kind === "movie" ? data.runtime : null} poster={data.poster} - // studio={data.studio} + studios={data.kind !== "collection" ? data.studios : null} playHref={data.kind !== "collection" ? data.playHref : null} trailerUrl={data.kind !== "collection" ? data.trailerUrl : null} watchStatus={ @@ -546,41 +539,37 @@ export const Header = ({ })} /> - {/* */} - {/* */} - {/*

*/} - {/* {t("show.links")}: */} - {/*

*/} - {/* {(!isLoading */} - {/* ? Object.entries(data.externalId!).filter( */} - {/* ([_, data]) => data.link, */} - {/* ) */} - {/* : [...Array(3)].map((_) => [undefined, undefined] as const) */} - {/* ).map(([name, data], i) => ( */} - {/* */} - {/* ))} */} - {/*
*/} + + +

+ {t("show.links")}: +

+ {Object.entries(data.externalId!) + .filter(([_, data]) => data.link) + .map(([name, data]) => ( + + ))} +
{/* {type === "show" && ( */} {/* */} {/* )} */}