diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx index 2d4a326..3bb9990 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx @@ -1,7 +1,7 @@ "use client"; -import { Card, Carousel } from "flowbite-react"; -import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate"; +import { Card } from "flowbite-react"; +import { ReleaseLinkList } from "#/components/ReleaseLink/ReleaseLinkList"; import Link from "next/link"; export const ReleaseInfoRelated = (props: { @@ -22,25 +22,23 @@ export const ReleaseInfoRelated = (props: { </Link> )} </div> - <div className="flex justify-center mt-2"> - <Carousel pauseOnHover={true}> - {props.related_releases - .filter((release: any) => { - if (release.id == props.release_id) { - return false; - } - return true; - }) - .map((release: any) => { - return ( - <ReleaseLink - key={release.id} - {...release} - settings={{ showGenres: false, showDescription: false }} - /> - ); - })} - </Carousel> + <div className="flex flex-col gap-4 mt-2"> + {props.related_releases + .filter((release: any) => { + if (release.id == props.release_id) { + return false; + } + return true; + }) + .map((release: any) => { + return ( + <ReleaseLinkList + key={release.id} + {...release} + settings={{ showGenres: false, showDescription: false }} + /> + ); + })} </div> </Card> ); diff --git a/app/components/ReleaseLink/ReleaseLinkList.tsx b/app/components/ReleaseLink/ReleaseLinkList.tsx new file mode 100644 index 0000000..4fcfa0c --- /dev/null +++ b/app/components/ReleaseLink/ReleaseLinkList.tsx @@ -0,0 +1,116 @@ +import Link from "next/link"; +import { Poster } from "../ReleasePoster/Poster"; +import { ReleaseChips } from "../ReleasePoster/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 ReleaseLinkList = (props: { + image: string; + title_ru: string; + title_original: string; + description?: string; + genres?: string; + grade?: number; + id: number; + settings?: { + showGenres?: boolean; + showDescription?: boolean; + }; + chipsSettings?: { + 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, + ...props.settings, + }; + const chipsSettings = props.chipsSettings || {}; + + 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.trim()); + }); + } + + return ( + <Link href={`/release/${props.id}`}> + <div className="flex gap-2"> + <div className="flex-shrink-0 w-32"> + <Poster image={props.image} className="h-auto" /> + </div> + <div className="flex flex-col gap-1"> + <ReleaseChips + {...props} + user_list={user_list} + grade={grade} + settings={{ lastWatchedHidden: false }} + /> + <div> + {settings.showGenres && + genres.length > 0 && + genres.map((genre: string, index: number) => { + return ( + <span + key={`release_${props.id}_genre_${genre}_${index}`} + className="text-sm font-light dark:text-white" + > + {index > 0 && ", "} + {genre} + </span> + ); + })} + </div> + {props.title_ru && ( + <p className="text-lg font-bold dark:text-white"> + {props.title_ru} + </p> + )} + {props.title_original && ( + <p className="text-sm text-gray-600 dark:text-gray-300"> + {props.title_original} + </p> + )} + {settings.showDescription && props.description && ( + <p className="mt-2 text-sm font-light leading-none text-white lg:text-base xl:text-lg line-clamp-4"> + {props.description} + </p> + )} + </div> + </div> + </Link> + ); +};