refactor: release related releases poster -> list

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

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