refactor: update style of Related Releases Card on Release page

app/components/Chip/Chip.tsx

@@ -6,26 +6,22 @@ export const Chip = (props: {
   devider?: string;
   bg_color?: string;
   style?: React.CSSProperties;
+  className?: string;
 }) => {
   return (
-    <div
+    <div className={`${props.bg_color || "bg-gray-500"} rounded-sm flex items-center justify-center ${props.className || ""}`}>
-      className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
-        props.bg_color || "bg-gray-500"
-      } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
-      style={props.style || {}}
-    >
       {props.icon_name && (
         <span
-          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ${props.icon_name}`}
+          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ml-2 ${props.icon_name}`}
           style={
             {
-              "color": "var(--icon-color)",
+              color: "var(--icon-color)",
               "--icon-color": props.icon_color || "#fff",
             } as React.CSSProperties
           }
         ></span>
       )}
-      <p className="text-xs text-white xl:text-base">
+      <p className="px-2 py-1 text-white xl:text-base">
         {props.name}
         {props.name && props.devider ? props.devider : " "}
         {props.name_2}

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 (
-                <ReleaseLink key={release.id} {...release} type={"poster"} />
+                <ReleaseLink
+                  key={release.id}
+                  {...release}
+                  settings={{ showGenres: false, showDescription: false }}
+                />
               );
             })}
         </Carousel>

app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx

@@ -21,7 +21,7 @@ export const ReleaseLink169Poster = (props: any) => {
   }
   return (
     <Link
-      href={`/release/${props.id}`}
+      href={`/release/${props.id}`} 
       className={props.isLinkDisabled ? "pointer-events-none" : ""}
       aria-disabled={props.isLinkDisabled}
       tabIndex={props.isLinkDisabled ? -1 : undefined}

app/components/ReleaseLink/ReleaseLink.tsx

@@ -1,22 +1,52 @@
-import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+import Link from "next/link";
-import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+import { Poster } from "../ReleasePoster/Poster";
-import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+import { Chip } from "../Chip/Chip";
+// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
 
-export const ReleaseLink = (props: { type?: "16_9" | "poster" }) => {
+const profile_lists = {
-  const type = props.type || "16_9";
+  // 0: "Не смотрю",
-
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
-  if (type == "16_9") {
+  2: { name: "В планах", bg_color: "bg-purple-500" },
-    return (
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
-      <>
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
-        <div>TYPE=16/9</div>
+  5: { name: "Брошено", bg_color: "bg-red-500" },
-
+};
-        {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+
-        {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+export const ReleaseLink = (props: {
-      </>
+  // type?: "16_9" | "poster";
-    );
+  image: string;
-  }
+  title_ru: string;
-  if (type == "poster") {
+  title_original: string;
-    return <div>TYPE=POSTER</div>;
+  genres?: string;
-    // return <ReleaseLinkPoster {...props} />;
+  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 (
+  //     <>
+  //       <div>TYPE=16/9</div>
+
+  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+  //     </>
+  //   );
+  // }
+  // if (props.type == "poster") {
+  return (
+    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
+  );
+  // return <ReleaseLinkPoster {...props} />;
+  // }
 };

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 (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};

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 (
+    <div
+      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
+    >
+      {!settings.chips.gradeHidden && grade ?
+        <Chip
+          className="w-12"
+          bg_color={
+            grade == 0 ? "hidden"
+            : grade < 2 ?
+              "bg-red-500"
+            : grade < 3 ?
+              "bg-orange-500"
+            : grade < 4 ?
+              "bg-yellow-500"
+            : "bg-green-500"
+          }
+          name={`${grade}`}
+        />
+      : ""}
+      {!settings.chips.listHidden && user_list && (
+        <Chip bg_color={user_list.bg_color} name={user_list.name} />
+      )}
+      {!settings.chips.statusHidden && status ?
+        <Chip name={status.name} />
+      : status_id != 0 && (
+          <Chip
+            name={
+              status_id == 1 ? "Завершено"
+              : status_id == 2 ?
+                "Онгоинг"
+              : status_id == 3 && "Анонс"
+            }
+          />
+        )
+      }
+      {!settings.chips.episodesHidden && (
+        <Chip
+          name={episodes_released && episodes_released}
+          name_2={episodes_total ? episodes_total + " эп." : "? эп."}
+          devider="/"
+        />
+      )}
+      {!settings.chips.categoryHidden && category && (
+        <Chip name={category.name} />
+      )}
+      {!settings.chips.favHidden && is_favorite && (
+        <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+          <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+        </div>
+      )}
+    </div>
+  );
+};

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 (

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 (
+    <div className="relative flex items-center justify-center w-full h-full group">
+      <div className="absolute z-20 top-2 left-2 right-2">
+        <ReleaseChips
+          {...props}
+          user_list={user_list}
+          grade={grade}
+          settings={settings}
+        ></ReleaseChips>
+      </div>
+      <div className="absolute z-20 bottom-2 left-2 right-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+        <div className="lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0 transition-transform">
+          {settings.showGenres &&
+            genres.length > 0 &&
+            genres.map((genre: string, index: number) => {
+              return (
+                <span key={`release_${props.id}_genre_${genre}_${index}`}>
+                  {index > 0 && ", "}
+                  <Link
+                    href={`/search?q=${genre}&searchBy=tag`}
+                    className="font-light text-white md:text-sm lg:text-base xl:text-lg"
+                  >
+                    {genre}
+                  </Link>
+                </span>
+              );
+            })}
+          {props.title_ru && (
+            <p className="text-xl font-bold text-white md:text-2xl">
+              {props.title_ru}
+            </p>
+          )}
+          {props.title_original && (
+            <p className="text-sm text-gray-300 md:text-base">
+              {props.title_original}
+            </p>
+          )}
+        </div>
+        {settings.showDescription && props.description && (
+            <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
+              {props.description}
+            </p>
+          )}
+      </div>
+      <div className="absolute w-full h-full bg-gradient-to-t from-black to-transparent"></div>
+      <Poster
+        image={props.image}
+        className="min-w-full min-h-full flex-grow-1"
+      ></Poster>
+    </div>
+  );
+};