From b0246aa4e569a312e465c3aca56025066dd3d8e3 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Thu, 11 Jul 2024 20:16:58 +0500
Subject: [PATCH] feat: add release episode counts

---
 .../ReleaseCourusel/ReleaseCourusel.jsx       |  2 +-
 app/components/ReleaseLink/ReleaseLink.jsx    | 72 ++++++++++++-------
 app/page.js                                   |  2 +-
 3 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.jsx b/app/components/ReleaseCourusel/ReleaseCourusel.jsx
index 767a000..f92962a 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.jsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.jsx
@@ -36,7 +36,7 @@ export const ReleaseCourusel = (props) => {
   return (
     <section className={`${Styles.section}`}>
       <div className="flex justify-between px-4 border-b-2 border-black">
-        <h1 className="font-bold text-md sm:text-xl">{props.sectionTitle}</h1>
+        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">{props.sectionTitle}</h1>
         <Link href={props.showAllLink}>
           <div className="flex items-center">
             <p className="hidden text-xl font-bold sm:block">Показать все</p>
diff --git a/app/components/ReleaseLink/ReleaseLink.jsx b/app/components/ReleaseLink/ReleaseLink.jsx
index 45366c5..6c3b70a 100644
--- a/app/components/ReleaseLink/ReleaseLink.jsx
+++ b/app/components/ReleaseLink/ReleaseLink.jsx
@@ -4,34 +4,54 @@ export const ReleaseLink = (props) => {
   const grade = props.grade.toFixed(1);
   return (
     <Link href={`/release/${props.id}`}>
-        <div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px]">
-          <div className="relative w-full h-full bg-gradient-to-t from-black to-transparent">
-            <img
-              className="absolute object-cover w-full h-full mix-blend-overlay"
-              src={props.image}
-              alt=""
-            />
-            <div
-              className={`absolute left-2 top-2 rounded-sm ${
-                grade == 0
-                  ? "hidden"
-                  : grade < 2
-                  ? "bg-red-500"
-                  : grade < 3
-                  ? "bg-orange-500"
-                  : grade < 4
-                  ? "bg-yellow-500"
-                  : "bg-green-500"
-              }`}
-            >
-              <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{grade}</p>
-            </div>
-            <div className="absolute bg-gray-500 rounded-sm top-2 right-2">
-              <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{props.status.name}</p>
-            </div>
-            <p className="absolute text-xs text-white md:text-base lg:text-lg left-2 bottom-2">{props.title_ru}</p>
+      <div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px] group">
+        <div className="relative w-full h-full overflow-hidden bg-gradient-to-t from-black to-transparent">
+          <img
+            className="absolute z-0 object-cover w-full h-full transition mix-blend-overlay group-hover:scale-110"
+            src={props.image}
+            alt=""
+          />
+          <div
+            className={`absolute left-2 top-2 rounded-sm ${
+              grade == 0
+                ? "hidden"
+                : grade < 2
+                ? "bg-red-500"
+                : grade < 3
+                ? "bg-orange-500"
+                : grade < 4
+                ? "bg-yellow-500"
+                : "bg-green-500"
+            }`}
+          >
+            <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">
+              {grade}
+            </p>
           </div>
+          <div className="absolute flex flex-col items-end gap-1 top-2 right-2">
+            <div className="bg-gray-500 rounded-sm">
+              <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">
+                {props.status.name}
+              </p>
+            </div>
+            {props.status.name === "Выходит"  && <div className="bg-gray-500 rounded-sm">
+              <div className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white flex">
+                {props.episodes_released && (
+                  <p>{`${props.episodes_released}/`}</p>
+                )}
+                {props.episodes_total ? (
+                  <p>{props.episodes_total} эп.</p>
+                ) : (
+                  <p>? эп.</p>
+                )}
+              </div>
+            </div>}
+          </div>
+          <p className="absolute text-xs text-white md:text-base lg:text-lg left-2 bottom-2">
+            {props.title_ru}
+          </p>
         </div>
+      </div>
     </Link>
   );
 };
diff --git a/app/page.js b/app/page.js
index 6f2fac8..0d6a75b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -28,7 +28,7 @@ export default function Home() {
   ] = fetchReleases("announce");
 
   return (
-    <main className="flex flex-col sm:pt-4 sm:pb-0 pb-16">
+    <main className="flex flex-col pt-2 pb-16 sm:pt-4 sm:pb-0">
       {lastReleasesData && (
         <ReleaseCourusel id="home-courusel-last" sectionTitle="Последние релизы" showAllLink="/last" content={lastReleasesData.content} />
       )}