refactor: update style of Related Releases Card on Release page

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>
+  );
+};