refactor: release courusel

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,8 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
+                  className="max-w-64 md:max-w-96"
+                  // className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>

app/components/ReleaseLink/ReleaseLink.16_9Related_old.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/ReleasePoster/Poster.tsx

@@ -3,10 +3,6 @@ import Image from "next/image";
 export const Poster = (props: {
   image: string;
   alt?: string;
-  //   title: { ru: string; original: string };
-  //   note: string | null;
-  //   description: string;
-//   type?: "image_only";
   className?: string;
 }) => {
   return (
@@ -17,6 +13,10 @@ export const Poster = (props: {
       alt={props.alt || ""}
       width={285}
       height={385}
+      style={{
+        width: "100%",
+        height: "auto",
+      }}
     />
   );
 };

app/components/ReleasePoster/PosterWithStuff.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Poster } from "./Poster";
 import { ReleaseChips } from "./Chips";
 
@@ -75,7 +74,7 @@ export const PosterWithStuff = (props: {
   }
 
   return (
-    <div className="relative flex items-center justify-center w-full h-full group">
+    <div className="relative flex items-center justify-center w-full h-full overflow-hidden group">
       <div className="absolute z-20 top-2 left-2 right-2">
         <ReleaseChips
           {...props}
@@ -90,14 +89,12 @@ export const PosterWithStuff = (props: {
             genres.length > 0 &&
             genres.map((genre: string, index: number) => {
               return (
-                <span key={`release_${props.id}_genre_${genre}_${index}`}>
+                <span
+                  key={`release_${props.id}_genre_${genre}_${index}`}
+                  className="font-light text-white md:text-sm lg:text-base xl:text-lg"
+                >
                   {index > 0 && ", "}
-                  <Link
+                  {genre}
-                    href={`/search?q=${genre}&searchBy=tag`}
-                    className="font-light text-white md:text-sm lg:text-base xl:text-lg"
-                  >
-                    {genre}
-                  </Link>
                 </span>
               );
             })}
@@ -113,15 +110,15 @@ export const PosterWithStuff = (props: {
           )}
         </div>
         {settings.showDescription && props.description && (
-            <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
+          <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
-              {props.description}
+            {props.description}
-            </p>
+          </p>
-          )}
+        )}
       </div>
-      <div className="absolute w-full h-full bg-gradient-to-t from-black to-transparent"></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="min-w-full min-h-full flex-grow-1"
+        className="w-auto h-auto min-w-full min-h-full flex-grow-1"
       ></Poster>
     </div>
   );

app/pages/Related.tsx

@@ -5,7 +5,6 @@ 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";
@@ -97,7 +96,6 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                 genres.push(genre.trim());
               });
             }
-            // return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
             return (
               <Link href={`/release/${release.id}`} key={release.id}>
                 <Card>
@@ -112,12 +110,12 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                       </h1>
                     </div>
                     <div className="flex items-center justify-center lg:hidden">
-                      <div className="max-w-96">
+                      <div className="max-w-64">
                         <PosterWithStuff {...release} settings={settings} />
                       </div>
                     </div>
                     <div className="hidden lg:flex">
-                      <Poster image={release.image} />
+                      <Poster image={release.image} className="h-auto" />
                     </div>
                     <div className="flex-col hidden gap-2 lg:flex">
                       <ReleaseChips
@@ -133,14 +131,10 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                             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 && ", "}
-                                <Link
+                                {genre}
-                                  href={`/search?q=${genre}&searchBy=tag`}
-                                  className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
-                                >
-                                  {genre}
-                                </Link>
                               </span>
                             );
                           })}