fix: poster aspect ration in release carousel

BREAKING: disable all image rendering

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/Profile/Profile.ReleaseHistory.tsx

@@ -1,25 +1,29 @@
-import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import { Card, Carousel } from "flowbite-react";
 import type {
   FlowbiteCarouselIndicatorsTheme,
   FlowbiteCarouselControlTheme,
+  CustomFlowbiteTheme,
 } from "flowbite-react";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
-    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    off: "bg-gray-400/50 hover:bg-gray-200",
-    on: "bg-gray-600 dark:bg-gray-200",
+    on: "bg-gray-200",
   },
-  base: "h-3 w-3 rounded-full",
+  base: "h-3 w-3 rounded-full max-w-[300px]",
   wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
 };
 
 const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
-  base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
-  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
+  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
 };
 
-const CarouselTheme = {
+const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
+  root: {
+    base: "relative h-full w-full max-w-[375px]",
+  },
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -28,10 +32,16 @@ export const ProfileReleaseHistory = (props: any) => {
   return (
     <Card className="h-fit">
       <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
-      <div className="max-w-[700px] min-h-[200px]">
+      <div className="flex justify-center">
         <Carousel theme={CarouselTheme}>
           {props.history.map((release) => {
-            return <ReleaseLink key={`history-${release.id}`} {...release} />;
+            return (
+              <ReleaseLink
+                key={`history-${release.id}`}
+                {...release}
+                chipsSettings={{ lastWatchedHidden: false }}
+              />
+            );
           })}
         </Carousel>
       </div>

app/components/Profile/Profile.ReleaseRatings.tsx

@@ -17,6 +17,7 @@ import { useCallback, useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
+import { Poster } from "../ReleasePoster/Poster";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
@@ -33,6 +34,9 @@ const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
 };
 
 const CarouselTheme = {
+  root: {
+    base: "relative h-full w-full max-w-[700px]",
+  },
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -47,19 +51,15 @@ export const ProfileReleaseRatings = (props: any) => {
           Посмотреть все
         </Button>
       </div>
-      <div className="max-w-[700px] min-h-[200px]">
+      <div className="flex min-h-[200px] items-center justify-center">
         <Carousel theme={CarouselTheme}>
           {props.ratings.map((release) => {
             return (
               <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
                 <div className="flex gap-4 xl:mx-20">
-                  <Image
+                  <div className="max-w-32">
-                    src={release.image}
+                    <Poster image={release.image} />
-                    width={100}
+                  </div>
-                    height={125}
-                    alt=""
-                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
-                  />
                   <div className="flex flex-col gap-1 py-4">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <Rating size="md">
@@ -155,7 +155,7 @@ const ProfileReleaseRatingsModal = (props: {
         ref={modalRef}
       >
         {isLoading && <Spinner />}
-        {content && content.length > 0 ? (
+        {content && content.length > 0 ?
           content.map((release) => {
             return (
               <Link
@@ -163,13 +163,9 @@ const ProfileReleaseRatingsModal = (props: {
                 key={`vote-modal-${release.id}`}
               >
                 <div className="flex gap-4 xl:mx-20">
-                  <Image
+                  <div className="flex-shrink-0 max-w-32">
-                    src={release.image}
+                    <Poster image={release.image} />
-                    width={100}
+                  </div>
-                    height={125}
-                    alt=""
-                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
-                  />
                   <div className="flex flex-col gap-1 py-2">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <div className="flex items-center gap-1">
@@ -200,9 +196,7 @@ const ProfileReleaseRatingsModal = (props: {
               </Link>
             );
           })
-        ) : (
+        : <h1>Оценок нет</h1>}
-          <h1>Оценок нет</h1>
-        )}
       </div>
     </Modal>
   );

app/components/ReleaseCourusel/ReleaseCourusel.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 import Link from "next/link";
 
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -42,7 +42,7 @@ export const ReleaseCourusel = (props: {
           allowTouchMove={true}
           breakpoints={{
             1800: {
-              initialSlide: 1,
+              initialSlide: 2,
               centeredSlides: true
             }
           }}
@@ -52,7 +52,7 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
+                  className="h-full max-w-64 md:max-w-96 aspect-[384/538]"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>

app/components/ReleaseInfo/ReleaseInfo.Basics.tsx

@@ -2,6 +2,7 @@ import { Card, Button } from "flowbite-react";
 import { useState } from "react";
 import Image from "next/image";
 import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
+import { Poster } from "../ReleasePoster/Poster";
 
 export const ReleaseInfoBasics = (props: {
   release_id: number;
@@ -14,14 +15,20 @@ export const ReleaseInfoBasics = (props: {
 
   return (
     <Card className="h-full row-span-2">
-      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
+      <div className="flex flex-col w-full h-full gap-4 lg:grid lg:grid-cols-[1fr_2fr] items-center lg:items-start justify-center lg:justify-start">
-        <Image
+        <div className="flex flex-col gap-2">
-          className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
+          <div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
-          src={props.image}
+            <Poster
-          alt=""
+              image={props.image}
-          width={285}
+              className="z-10 sm:scale-95 lg:scale-100"
-          height={385}
+            />
-        />
+            <Poster
+              image={props.image}
+              className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75"
+            />
+          </div>
+          <ReleaseInfoStreaming release_id={props.release_id} />
+        </div>
         <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
           <div className="flex flex-col gap-1">
             <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
@@ -54,7 +61,6 @@ export const ReleaseInfoBasics = (props: {
           >
             {isFullDescription ? "Скрыть" : "Показать полностью"}
           </Button>
-          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
       </div>
     </Card>

app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx

@@ -23,17 +23,17 @@ export const ReleaseInfoStreaming = (props: { release_id: number }) => {
       : !(data.content.length > 0) ?
         ""
       : <div>
-          <p className="mt-4 mb-1 text-lg">Официальные источники: </p>
+          <div className="grid grid-flow-row-dense grid-cols-1 gap-1 2xl:grid-cols-2">
-          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
             {data.content.map((item: any) => {
               return (
                 <a
                   href={item.url}
+                  target="_blank"
                   key={`platform_${item.id}`}
-                  className="flex items-center gap-2 px-2 py-1 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
+                  className="flex items-center gap-2 px-4 py-2 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
                 >
                   <img src={item.icon} className="w-6 h-6 rounded-full" />
-                  <p className="text-lg">{item.name}</p>
+                  <p className="text-sm line-clamp-2">{item.name}</p>
                 </a>
               );
             })}

app/components/ReleaseInfo/ReleaseInfo.Related.tsx

@@ -1,13 +1,29 @@
 "use client";
 
-import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react";
+import { Card, Carousel, CustomFlowbiteTheme, FlowbiteCarouselControlTheme, FlowbiteCarouselIndicatorsTheme } from "flowbite-react";
-import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
 import Link from "next/link";
 
+const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
+  active: {
+    off: "bg-gray-400/50 hover:bg-gray-200",
+    on: "bg-gray-200",
+  },
+  base: "h-3 w-3 rounded-full max-w-[300px]",
+  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
+};
+
+const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
+};
+
 const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
   root: {
     base: "relative h-full w-full max-w-[300px]",
   },
+  indicators: CarouselIndicatorsTheme,
+  control: CarouselControlsTheme,
 };
 
 export const ReleaseInfoRelated = (props: {
@@ -39,7 +55,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_9FullImage.tsx

@@ -1,133 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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 ReleaseLink169 = (props: any) => {
-  const grade = props.grade ? props.grade.toFixed(1) : null;
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="w-full aspect-video group">
-        <div
-          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
-          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
-          }}
-        >
-          <Image
-            src={props.image}
-            fill={true}
-            alt={props.title || ""}
-            className="-z-[1] object-cover"
-            sizes="
-                  (max-width: 768px) 300px,
-                  (max-width: 1024px) 600px,
-                  900px
-                  "
-          />
-          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-1 sm:p-2">
-            {grade ? (
-              <Chip
-                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}
-              />
-            ) : (
-              ""
-            )}
-            {user_list && (
-              <Chip bg_color={user_list.bg_color} name={user_list.name} />
-            )}
-            {props.status ? (
-              <Chip name={props.status.name} />
-            ) : (
-              props.status_id != 0 && (
-                <Chip
-                  name={
-                    props.status_id == 1
-                      ? "Завершено"
-                      : props.status_id == 2
-                      ? "Онгоинг"
-                      : props.status_id == 3 && "Анонс"
-                  }
-                />
-              )
-            )}
-            <Chip
-              name={props.episodes_released && props.episodes_released}
-              name_2={
-                props.episodes_total ? props.episodes_total + " эп." : "? эп."
-              }
-              devider="/"
-            />
-            {props.last_view_episode && (
-              <Chip
-                name={
-                  props.last_view_episode.name
-                    ? props.last_view_episode.name
-                    : `${props.last_view_episode.position + 1} серия`
-                }
-                name_2={
-                  "last_view_timestamp" in props &&
-                  sinceUnixDate(props.last_view_timestamp)
-                }
-                devider=", "
-              />
-            )}
-            {props.category && <Chip name={props.category.name} />}
-            {props.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>
-          <div className="absolute bottom-0 left-0 p-1 sm:p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
-            <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
-              {props.genres && (
-                <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="text-sm font-bold text-white md:text-base lg:text-lg xl:text-xl">
-                {props.title_ru}
-              </p>
-            </div>
-            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${
-                props.description.length > 125 ? "..." : ""
-              }`}
-            </p>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};

app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx

@@ -1,124 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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 ReleaseLink169Poster = (props: any) => {
-  const grade = props.grade ? props.grade.toFixed(1) : null;
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="w-full h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
-        <div className="flex w-full h-full gap-2 overflow-hidden">
-          <div className="flex-shrink-0">
-            <Image
-              src={props.image}
-              height={250}
-              width={250}
-              alt={props.title || ""}
-              className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
-            />
-          </div>
-          <div className="flex flex-col flex-1 w-full h-full">
-            <div>
-              {props.genres && (
-                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl">
-                {`${props.title_ru.slice(0, 47)}${
-                  props.title_ru.length > 47 ? "..." : ""
-                }`}
-              </p>
-              <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                {`${props.description.slice(0, 97)}${
-                  props.description.length > 97 ? "..." : ""
-                }`}
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-1 mt-1">
-              {grade ? <Chip
-                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}
-              /> : ""}
-              {user_list && (
-                <Chip bg_color={user_list.bg_color} name={user_list.name} />
-              )}
-              {props.status ? (
-                <Chip name={props.status.name} />
-              ) : (
-                props.status_id != 0 && (
-                  <Chip
-                    name={
-                      props.status_id == 1
-                        ? "Завершено"
-                        : props.status_id == 2
-                        ? "Онгоинг"
-                        : props.status_id == 3 && "Анонс"
-                    }
-                  />
-                )
-              )}
-              <Chip
-                name={props.episodes_released && props.episodes_released}
-                name_2={
-                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
-                }
-                devider="/"
-              />
-              {props.last_view_episode && (
-                <Chip
-                  name={
-                    props.last_view_episode.name
-                      ? props.last_view_episode.name
-                      : `${props.last_view_episode.position + 1} серия`
-                  }
-                  name_2={
-                    "last_view_timestamp" in props &&
-                    sinceUnixDate(props.last_view_timestamp)
-                  }
-                  devider=", "
-                />
-              )}
-              {props.category && <Chip name={props.category.name} />}
-              {props.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>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};

app/components/ReleaseLink/ReleaseLink.16_9Related.tsx

@@ -1,136 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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" },
-};
-const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
-
-export const ReleaseLink169Related = (props: any) => {
-  const grade = props.grade.toFixed(1);
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={`${
-        props.isLinkDisabled ? "pointer-events-none" : ""
-      } flex gap-4 items-center justify-between mx-auto w-full max-w-[1024px]`}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="items-center justify-center flex-1 hidden lg:flex">
-        <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
-          {props.season ? YearSeason[props.season] : ""}
-          <br/>
-          {props.year ? props.year : ""}
-        </h1>
-      </div>
-      <div className="w-full max-w-[768px] h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
-        <div className="flex w-full h-full gap-2 overflow-hidden">
-          <div className="flex-shrink-0">
-            <Image
-              src={props.image}
-              height={250}
-              width={250}
-              alt={props.title || ""}
-              className="object-cover aspect-[9/16] lg:aspect-[12/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
-            />
-          </div>
-          <div className="flex flex-col flex-1 w-full h-full">
-            <div>
-              {props.genres && (
-                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="block text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:hidden">
-                {`${props.title_ru.slice(0, 47)}${
-                  props.title_ru.length > 47 ? "..." : ""
-                }`}
-              </p>
-              <p className="block text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg md:hidden">
-                {`${props.description.slice(0, 97)}${
-                  props.description.length > 97 ? "..." : ""
-                }`}
-              </p>
-              <p className="hidden text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:block max-w-[512px]">
-                {props.title_ru}
-              </p>
-              <p className="hidden text-xs font-light text-black dark:text-white md:text-sm:text-base xl:text-lg md:block max-w-[512px]">
-                {props.description}
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-1 mt-1">
-              <Chip
-                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}
-              />
-              {user_list && (
-                <Chip bg_color={user_list.bg_color} name={user_list.name} />
-              )}
-              {props.status ? (
-                <Chip name={props.status.name} />
-              ) : (
-                props.status_id != 0 && (
-                  <Chip
-                    name={
-                      props.status_id == 1
-                        ? "Завершено"
-                        : props.status_id == 2
-                        ? "Онгоинг"
-                        : props.status_id == 3 && "Анонс"
-                    }
-                  />
-                )
-              )}
-              <Chip
-                name={props.episodes_released && props.episodes_released}
-                name_2={
-                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
-                }
-                devider="/"
-              />
-              {props.category && <Chip name={props.category.name} />}
-              {props.season || props.year ? (
-                <Chip
-                  bg_color="lg:hidden bg-gray-500"
-                  name={props.season ? YearSeason[props.season] : ""}
-                  name_2={props.year ? `${props.year} год` : ""}
-                  devider=" "
-                />
-              ) : (
-                ""
-              )}
-              {props.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>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};

app/components/ReleaseLink/ReleaseLink.Poster.tsx

@@ -1,84 +0,0 @@
-import Link from "next/link";
-import { Chip } from "#/components/Chip/Chip";
-
-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 ReleaseLinkPoster = (props: any) => {
-  const grade = props.grade.toFixed(1);
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div
-        className="relative w-full h-64 gap-8 p-2 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
-        style={{
-          backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
-        }}
-      >
-        <div className="flex flex-wrap gap-1">
-          <Chip
-            bg_color={
-              props.grade.toFixed(1) == 0
-                ? "hidden"
-                : props.grade.toFixed(1) < 2
-                ? "bg-red-500"
-                : props.grade.toFixed(1) < 3
-                ? "bg-orange-500"
-                : props.grade.toFixed(1) < 4
-                ? "bg-yellow-500"
-                : "bg-green-500"
-            }
-            name={props.grade.toFixed(1)}
-          />
-          {props.status ? (
-            <Chip name={props.status.name} />
-          ) : (
-            <Chip
-              name={
-                props.status_id == 1
-                  ? "Завершено"
-                  : props.status_id == 2
-                  ? "Онгоинг"
-                  : "Анонс"
-              }
-            />
-          )}
-          <Chip
-            name={props.episodes_released && props.episodes_released}
-            name_2={
-              props.episodes_total ? props.episodes_total + " эп." : "? эп."
-            }
-            devider="/"
-          />
-        </div>
-        <div className="absolute flex flex-col gap-2 text-white bottom-4 left-2 right-2">
-          {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>
-      </div>
-    </Link>
-  );
-};

app/components/ReleaseLink/ReleaseLink.tsx

@@ -1,19 +0,0 @@
-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 type = props.type || "16_9";
-
-  if (type == "16_9") {
-    return (
-      <>
-        <div className="hidden lg:block"><ReleaseLink169 {...props} /></div>
-        <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div>
-      </>
-    )
-  }
-  if (type == "poster") {
-    return <ReleaseLinkPoster {...props} />;
-  }
-};

app/components/ReleaseLink/ReleaseLinkUpdate.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
+
+export const ReleaseLink = (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;
+}) => {
+  return (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};

app/components/ReleasePoster/Chips.tsx

@@ -0,0 +1,103 @@
+import { sinceUnixDate } from "#/api/utils";
+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;
+  last_view_episode?: any;
+  last_view_timestamp?: any;
+}
+
+export const ReleaseChips = ({
+  settings,
+  grade,
+  status,
+  status_id,
+  user_list,
+  episodes_released,
+  episodes_total,
+  category,
+  is_favorite,
+  last_view_episode,
+  last_view_timestamp,
+}: ChipProps) => {
+  const chipSettings = {
+    enabled: true,
+    gradeHidden: false,
+    statusHidden: false,
+    categoryHidden: false,
+    episodesHidden: false,
+    listHidden: false,
+    favHidden: false,
+    lastWatchedHidden: true,
+    ...settings,
+  };
+
+  return (
+    <div className={`${chipSettings.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}>
+      {!chipSettings.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}`}
+        />
+      : ""}
+      {!chipSettings.listHidden && user_list && (
+        <Chip bg_color={user_list.bg_color} name={user_list.name} />
+      )}
+      {!chipSettings.statusHidden && status ?
+        <Chip name={status.name} />
+      : status_id != 0 && (
+          <Chip
+            name={
+              status_id == 1 ? "Завершено"
+              : status_id == 2 ?
+                "Онгоинг"
+              : status_id == 3 && "Анонс"
+            }
+          />
+        )
+      }
+      {!chipSettings.episodesHidden && (
+        <Chip
+          name={episodes_released && episodes_released}
+          name_2={episodes_total ? episodes_total + " эп." : "? эп."}
+          devider="/"
+        />
+      )}
+      {!chipSettings.categoryHidden && category && <Chip name={category.name} />}
+      {!chipSettings.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>
+      )}
+      {!chipSettings.lastWatchedHidden && last_view_episode && (
+        <Chip
+          name={
+            last_view_episode.name ?
+              last_view_episode.name
+            : `${last_view_episode.position + 1} серия`
+          }
+          name_2={last_view_timestamp && sinceUnixDate(last_view_timestamp)}
+          devider=", "
+        />
+      )}
+    </div>
+  );
+};

app/components/ReleasePoster/Poster.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+export const Poster = (props: {
+  image: string;
+  alt?: string;
+  className?: string;
+}) => {
+  return (
+    <Image
+      className={`object-cover rounded-lg shadow-md ${props.className}`}
+      // className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
+      src={props.image}
+      alt={props.alt || ""}
+      width={285}
+      height={385}
+      style={{
+        width: "100%",
+        height: "auto",
+      }}
+    />
+  );
+};

app/components/ReleasePoster/PosterWithStuff.tsx

@@ -0,0 +1,117 @@
+import { Poster } from "./Poster";
+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;
+  };
+  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 (
+    <div className="relative w-full h-full overflow-hidden rounded-lg group">
+      <div className="absolute z-20 top-2 left-2 right-2">
+        <ReleaseChips
+          {...props}
+          user_list={user_list}
+          grade={grade}
+          settings={chipsSettings}
+        ></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}`}
+                  className="font-light text-white md:text-sm lg:text-base xl:text-lg"
+                >
+                  {index > 0 && ", "}
+                  {genre}
+                </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 rounded-b-lg bg-gradient-to-t from-black to-transparent"></div>
+      <Poster
+        image={props.image}
+        className="w-auto h-auto min-w-full min-h-full flex-grow-1"
+      ></Poster>
+    </div>
+  );
+};

app/components/ReleaseSection/ReleaseSection.tsx

@@ -1,4 +1,4 @@
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 
 export const ReleaseSection = (props: {
   sectionTitle?: string;
@@ -14,15 +14,22 @@ export const ReleaseSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
           {props.content.map((release) => {
             return (
-              <div key={release.id} className="w-full h-full lg:aspect-video">
+              <div key={release.id} className="w-full h-full">
-                <ReleaseLink {...release} />
+                <ReleaseLink
+                  {...release}
+                  chipsSettings={{
+                    enabled: true,
+                    lastWatchedHidden:
+                      (props.sectionTitle &&
+                        props.sectionTitle.toLowerCase() != "история")
+                  }}
+                />
               </div>
             );
           })}
-          {props.content.length == 1 && <div></div>}
         </div>
       </div>
     </section>

app/pages/CreateCollection.tsx

@@ -15,7 +15,7 @@ import {
   Modal,
   useThemeMode,
 } from "flowbite-react";
-import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
+import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
 import { CropModal } from "#/components/CropModal/CropModal";
 import { b64toBlob, tryCatchAPI } from "#/api/utils";
 
@@ -462,20 +462,17 @@ export const CreateCollectionPage = () => {
           </Button>
         </div>
         <div className="m-4">
-          <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2 min-w-full">
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
             {addedReleases.map((release) => {
               return (
-                <div
+                <div key={release.id} className="relative w-full h-full group">
-                  key={release.id}
-                  className="relative w-full h-full aspect-video group"
-                >
                   <button
-                    className="absolute inset-0 z-10 text-black transition-opacity bg-white opacity-0 group-hover:opacity-75"
+                    className="absolute inset-0 z-30 text-black transition-opacity bg-white rounded-lg opacity-0 group-hover:opacity-75"
                     onClick={() => _deleteRelease(release)}
                   >
                     Удалить
                   </button>
-                  <ReleaseLink {...release} isLinkDisabled={true} />
+                  <PosterWithStuff {...release} />
                 </div>
               );
             })}
@@ -592,6 +589,9 @@ export const ReleasesEditModal = (props: {
       return;
     }
 
+    const newContent = content.filter((r) => r.id !== release.id);
+
+    setContent(newContent);
     props.setReleases([...props.releases, release]);
     props.setReleasesIds([...props.releasesIds, release.id]);
   }
@@ -611,11 +611,7 @@ export const ReleasesEditModal = (props: {
       >
         <form
           className="max-w-full mx-auto"
-          onSubmit={(e) => {
+          onSubmit={(e) => e.preventDefault()}
-            e.preventDefault();
-            setContent([]);
-            setQuery(e.target[0].value.trim());
-          }}
         >
           <label
             htmlFor="default-search"
@@ -647,30 +643,35 @@ export const ReleasesEditModal = (props: {
               className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Поиск аниме..."
               required
-              defaultValue={query || ""}
+              onChange={(e) => setQuery(e.target.value)}
+              value={query || ""}
             />
             <button
-              type="submit"
+              type="button"
-              className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              className="text-white absolute end-2.5 bottom-2.5 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+              onClick={() => {
+                setSize(0);
+                setContent([]);
+                setQuery("");
+              }}
             >
-              Поиск
+              Очистить
             </button>
           </div>
         </form>
 
-        <div className="grid grid-cols-2 gap-2 mt-2 md:grid-cols-4">
+        <div className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
           {content.map((release) => {
             return (
               <button
+                className="text-left"
                 key={release.id}
-                className="overflow-hidden"
                 onClick={() => _addRelease(release)}
               >
-                <ReleaseLink type="poster" {...release} isLinkDisabled={true} />
+                <PosterWithStuff {...release} />
               </button>
             );
           })}
-          {content.length == 1 && <div></div>}
         </div>
         {isLoading && (
           <div className="flex items-center justify-center h-full min-h-24">

app/pages/Related.tsx

@@ -5,11 +5,24 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
-import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
 import { useSWRfetcher } from "#/api/utils";
+import { Card } from "flowbite-react";
+import { Poster } from "#/components/ReleasePoster/Poster";
+import { ReleaseChips } from "#/components/ReleasePoster/Chips";
+import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
+import Link from "next/link";
 
+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" },
+};
+const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
 
-export function RelatedPage(props: {id: number|string, title: string}) {
+export function RelatedPage(props: { id: number | string; title: string }) {
   const token = useUserStore((state) => state.token);
 
   const getKey = (pageIndex: number, previousPageData: any) => {
@@ -52,22 +65,95 @@ export function RelatedPage(props: {id: number|string, title: string}) {
           Франшиза {props.title}
         </h1>
       </div>
-      {content && content.length > 0 ? (
+      {content && content.length > 0 ?
         <div className="flex flex-col gap-4 my-4">
           {content.map((release, index) => {
-            return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
+            const genres = [];
+            const grade =
+              release.grade ? Number(release.grade.toFixed(1)) : null;
+            const profile_list_status = release.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 (release.genres) {
+              const genres_array = release.genres.split(",");
+              genres_array.forEach((genre) => {
+                genres.push(genre.trim());
+              });
+            }
+            return (
+              <Link href={`/release/${release.id}`} key={release.id}>
+                <Card>
+                  <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_1fr_2fr] gap-4">
+                    <div className="flex items-center justify-center">
+                      <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
+                        {release.season ? YearSeason[release.season] : ""}
+                        {release.season ?
+                          <br />
+                        : ""}
+                        {release.year ? release.year : ""}
+                      </h1>
+                    </div>
+                    <div className="flex items-center justify-center lg:hidden">
+                      <div className="max-w-64">
+                        <PosterWithStuff {...release} />
+                      </div>
+                    </div>
+                    <div className="hidden lg:flex">
+                      <Poster image={release.image} className="h-auto" />
+                    </div>
+                    <div className="flex-col hidden gap-2 lg:flex">
+                      <ReleaseChips
+                        {...release}
+                        user_list={user_list}
+                        grade={grade}
+                      />
+                      <div>
+                        {genres.length > 0 &&
+                          genres.map((genre: string, index: number) => {
+                            return (
+                              <span
+                                key={`release_${props.id}_genre_${genre}_${index}`}
+                                className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
+                              >
+                                {index > 0 && ", "}
+                                {genre}
+                              </span>
+                            );
+                          })}
+                      </div>
+                      {release.title_ru && (
+                        <p className="text-xl font-bold dark:text-white md:text-2xl">
+                          {release.title_ru}
+                        </p>
+                      )}
+                      {release.title_original && (
+                        <p className="text-sm text-gray-600 dark:text-gray-300 md:text-base">
+                          {release.title_original}
+                        </p>
+                      )}
+                      {release.description && (
+                        <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
+                          {release.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </Card>
+              </Link>
+            );
           })}
         </div>
-      ) : isLoading ? (
+      : isLoading ?
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>
-      ) : (
+      : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
-        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
           <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
           <p>В франшизе пока ничего нет...</p>
         </div>
-      )}
+      }
       {data &&
         data[data.length - 1].current_page <
           data[data.length - 1].total_page_count && (