From cd4ada56574d9c2cae606a97816435e3ca006ef1 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Wed, 20 Nov 2024 21:24:48 +0500
Subject: [PATCH] refactor: update card style for mobile

---
 .../ReleaseCourusel/ReleaseCourusel.tsx       |   7 +-
 ...16_9.tsx => ReleaseLink.16_9FullImage.tsx} |   0
 .../ReleaseLink/ReleaseLink.16_9Poster.tsx    | 124 ++++++++++++++++++
 app/components/ReleaseLink/ReleaseLink.tsx    |  10 +-
 .../ReleaseSection/ReleaseSection.tsx         |   4 +-
 app/home/[slug]/page.tsx                      |   2 +-
 app/pages/Index.tsx                           |   2 +-
 7 files changed, 137 insertions(+), 12 deletions(-)
 rename app/components/ReleaseLink/{ReleaseLink.16_9.tsx => ReleaseLink.16_9FullImage.tsx} (100%)
 create mode 100644 app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
index 06d3a77..d7e333a 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@@ -52,7 +52,7 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="xl:max-w-[600px] sm:max-w-[400px] aspect-video"
+                  className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>
@@ -71,11 +71,6 @@ export const ReleaseCourusel = (props: {
               }
           ></div>
         </Swiper>
-        {/* <div className={`swiper ${Styles["swiper"]}`}>
-          <div className="swiper-wrapper">
-          </div>
-          
-        </div> */}
       </div>
     </section>
   );
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9.tsx b/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.16_9.tsx
rename to app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
new file mode 100644
index 0000000..2b5320a
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
@@ -0,0 +1,124 @@
+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.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="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>
+        </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.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>
+    </Link>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.tsx b/app/components/ReleaseLink/ReleaseLink.tsx
index 6d6c640..f81e277 100644
--- a/app/components/ReleaseLink/ReleaseLink.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.tsx
@@ -1,11 +1,17 @@
-import { ReleaseLink169 } from "./ReleaseLink.16_9";
+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 <ReleaseLink169 {...props} />;
+    return (
+      <>
+        <div className="hidden lg:block"><ReleaseLink169 {...props} /></div>
+        <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div>
+      </>
+    )
   }
   if (type == "poster") {
     return <ReleaseLinkPoster {...props} />;
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index c1642db..734e388 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -14,10 +14,10 @@ export const ReleaseSection = (props: {
         </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="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">
           {props.content.map((release) => {
             return (
-              <div key={release.id} className="w-full h-full aspect-video">
+              <div key={release.id} className="w-full h-full lg:aspect-video">
                 <ReleaseLink {...release} />
               </div>
             );
diff --git a/app/home/[slug]/page.tsx b/app/home/[slug]/page.tsx
index ded7fd9..3a79984 100644
--- a/app/home/[slug]/page.tsx
+++ b/app/home/[slug]/page.tsx
@@ -3,7 +3,7 @@ import { IndexCategoryPage } from "#/pages/IndexCategory";
 const SectionTitleMapping = {
   last: "Последние релизы",
   finished: "Завершенные релизы",
-  ongoing: "В эфире",
+  ongoing: "Выходит",
   announce: "Анонсированные релизы",
   films: "Фильмы",
 };
diff --git a/app/pages/Index.tsx b/app/pages/Index.tsx
index 4af1680..0051e38 100644
--- a/app/pages/Index.tsx
+++ b/app/pages/Index.tsx
@@ -61,7 +61,7 @@ export function IndexPage() {
       )}
       {ongoingReleasesData && (
         <ReleaseCourusel
-          sectionTitle="В эфире"
+          sectionTitle="Выходит"
           showAllLink="/home/ongoing"
           content={ongoingReleasesData.content}
         />