diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx index a7e8e7f..bd0225c 100644 --- a/app/components/Chip/Chip.tsx +++ b/app/components/Chip/Chip.tsx @@ -6,26 +6,22 @@ export const Chip = (props: { devider?: string; bg_color?: string; style?: React.CSSProperties; + className?: string; }) => { return ( -
+
{props.icon_name && ( )} -

+

{props.name} {props.name && props.devider ? props.devider : " "} {props.name_2} diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx index dbd6c40..496d342 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx @@ -1,7 +1,7 @@ "use client"; import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react"; -import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink"; +import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate"; import Link from "next/link"; const CarouselTheme: CustomFlowbiteTheme["carousel"] = { @@ -39,7 +39,11 @@ export const ReleaseInfoRelated = (props: { }) .map((release: any) => { return ( - + ); })} diff --git a/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx b/app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx similarity index 100% rename from app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx rename to app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx similarity index 99% rename from app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx rename to app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx index 384c914..5a02d6b 100644 --- a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx +++ b/app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx @@ -21,7 +21,7 @@ export const ReleaseLink169Poster = (props: any) => { } return ( { - const type = props.type || "16_9"; - - if (type == "16_9") { - return ( - <> -

TYPE=16/9
- - {/*
*/} - {/*
*/} - - ); - } - if (type == "poster") { - return
TYPE=POSTER
; - // return ; - } +const profile_lists = { + // 0: "Не смотрю", + 1: { name: "Смотрю", bg_color: "bg-green-500" }, + 2: { name: "В планах", bg_color: "bg-purple-500" }, + 3: { name: "Просмотрено", bg_color: "bg-blue-500" }, + 4: { name: "Отложено", bg_color: "bg-yellow-500" }, + 5: { name: "Брошено", bg_color: "bg-red-500" }, +}; + +export const ReleaseLink = (props: { + // type?: "16_9" | "poster"; + image: string; + title_ru: string; + title_original: string; + genres?: string; + grade?: number; + id: number; + settings?: { + showGenres?: boolean; + }; + profile_list_status?: number; + status?: { + name: string; + }; + status_id?: number; +}) => { + // const type = props.type || "16_9"; + + // if (type == "16_9") { + // return ( + // <> + //
TYPE=16/9
+ + // {/*
*/} + // {/*
*/} + // + // ); + // } + // if (props.type == "poster") { + return ( + <>You NEED to fix this. Replace import to `ReleaseLinkUpdate` + ); + // return ; + // } }; diff --git a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx new file mode 100644 index 0000000..4467f96 --- /dev/null +++ b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx @@ -0,0 +1,25 @@ +import Link from "next/link"; +import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff"; + +export const ReleaseLink = (props: { + image: string; + title_ru: string; + title_original: string; + genres?: string; + grade?: number; + id: number; + settings?: { + showGenres?: boolean; + }; + profile_list_status?: number; + status?: { + name: string; + }; + status_id?: number; +}) => { + return ( + + + + ); +}; diff --git a/app/components/ReleasePoster/Chips.tsx b/app/components/ReleasePoster/Chips.tsx new file mode 100644 index 0000000..0787772 --- /dev/null +++ b/app/components/ReleasePoster/Chips.tsx @@ -0,0 +1,79 @@ +import { Chip } from "../Chip/Chip"; + +interface ChipProps { + settings?: any; + grade?: any; + status?: any; + status_id?: any; + user_list?: any; + episodes_released?: any; + episodes_total?: any; + category?: any; + is_favorite?: any; +} + +export const ReleaseChips = ({ + settings, + grade, + status, + status_id, + user_list, + episodes_released, + episodes_total, + category, + is_favorite, +}: ChipProps) => { + return ( +
+ {!settings.chips.gradeHidden && grade ? + + : ""} + {!settings.chips.listHidden && user_list && ( + + )} + {!settings.chips.statusHidden && status ? + + : status_id != 0 && ( + + ) + } + {!settings.chips.episodesHidden && ( + + )} + {!settings.chips.categoryHidden && category && ( + + )} + {!settings.chips.favHidden && is_favorite && ( +
+ +
+ )} +
+ ); +}; diff --git a/app/components/ReleasePoster/Poster.tsx b/app/components/ReleasePoster/Poster.tsx index a7a4a56..315e411 100644 --- a/app/components/ReleasePoster/Poster.tsx +++ b/app/components/ReleasePoster/Poster.tsx @@ -6,7 +6,7 @@ export const Poster = (props: { // title: { ru: string; original: string }; // note: string | null; // description: string; - type?: "image_only"; +// type?: "image_only"; className?: string; }) => { return ( diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx new file mode 100644 index 0000000..cf4c7a7 --- /dev/null +++ b/app/components/ReleasePoster/PosterWithStuff.tsx @@ -0,0 +1,129 @@ +import Link from "next/link"; +import { Poster } from "./Poster"; +import { Chip } from "../Chip/Chip"; +import { ReleaseChips } from "./Chips"; + +const profile_lists = { + // 0: "Не смотрю", + 1: { name: "Смотрю", bg_color: "bg-green-500" }, + 2: { name: "В планах", bg_color: "bg-purple-500" }, + 3: { name: "Просмотрено", bg_color: "bg-blue-500" }, + 4: { name: "Отложено", bg_color: "bg-yellow-500" }, + 5: { name: "Брошено", bg_color: "bg-red-500" }, +}; + +export const PosterWithStuff = (props: { + image: string; + title_ru: string; + title_original: string; + description?: string; + genres?: string; + grade?: number; + id: number; + settings?: { + showGenres?: boolean; + showDescription?: boolean; + chips?: { + enabled: boolean; + gradeHidden?: boolean; + statusHidden?: boolean; + categoryHidden?: boolean; + episodesHidden?: boolean; + listHidden?: boolean; + favHidden?: boolean; + lastWatchedHidden?: boolean; + }; + }; + profile_list_status?: number; + status?: { + name: string; + }; + category?: { + name: string; + }; + status_id?: number; + episodes_released?: string; + episodes_total?: string; + is_favorite?: boolean; +}) => { + const genres = []; + const settings = { + showGenres: true, + showDescription: true, + chips: { + enabled: true, + gradeHidden: false, + statusHidden: false, + categoryHidden: false, + episodesHidden: false, + listHidden: false, + favHidden: false, + lastWatchedHidden: false, + }, + ...props.settings, + }; + const grade = props.grade ? Number(props.grade.toFixed(1)) : null; + const profile_list_status = props.profile_list_status || null; + let user_list = null; + if (profile_list_status != null || profile_list_status != 0) { + user_list = profile_lists[profile_list_status]; + } + if (props.genres) { + const genres_array = props.genres.split(","); + genres_array.forEach((genre) => { + genres.push(genre); + }); + } + + return ( +
+
+ +
+
+
+ {settings.showGenres && + genres.length > 0 && + genres.map((genre: string, index: number) => { + return ( + + {index > 0 && ", "} + + {genre} + + + ); + })} + {props.title_ru && ( +

+ {props.title_ru} +

+ )} + {props.title_original && ( +

+ {props.title_original} +

+ )} +
+ {settings.showDescription && props.description && ( +

+ {props.description} +

+ )} +
+
+ +
+ ); +};