From 99f7b4cdbb45b92d890c3775dd1b21dbfc8eb503 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 30 Apr 2024 18:34:56 +0500
Subject: [PATCH] feat(frontend/releases): add release info and related
 releases cards

---
 .../app/components/Release/ReleaseInfo.jsx    | 74 ++++++++++++++-----
 frontend/app/release/[id]/page.js             |  2 +
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/Release/ReleaseInfo.jsx b/frontend/app/components/Release/ReleaseInfo.jsx
index 7885302..ad99a27 100644
--- a/frontend/app/components/Release/ReleaseInfo.jsx
+++ b/frontend/app/components/Release/ReleaseInfo.jsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { getData } from "@/app/api/api-utils";
 import { endpoints } from "@/app/api/config";
+import { ReleaseCard } from "../ReleaseCard/ReleaseCard";
 
 export const ReleaseInfo = (props) => {
   const [releaseInfo, setReleaseInfo] = useState();
@@ -19,24 +20,63 @@ export const ReleaseInfo = (props) => {
   }, []);
 
   return (
-    <article class="no-padding">
-      <div class="grid no-space">
-        <div class="s6">
-          <img class="responsive" src={releaseInfo.release.image} />
-        </div>
-        <div class="s6">
-          <div class="padding">
-            <h5>Title</h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-            <nav>
-              <button class="border round">Button</button>
+    <>
+      {releaseInfo ? (
+        <>
+          <article className="no-padding fill">
+            <div className="grid no-space">
+              <div className="s3">
+                <img className="responsive" src={releaseInfo.release.image} />
+              </div>
+              <div className="s9">
+                <div className="padding">
+                  <h5>{releaseInfo.release.title_ru}</h5>
+                  <h6 className="small no-margin">
+                    {releaseInfo.release.title_original}
+                  </h6>
+                  <p className="small no-margin">
+                    {releaseInfo.release.country} •{" "}
+                    {releaseInfo.release.status.name} •{" "}
+                    {releaseInfo.release.episodes_released}/
+                    {releaseInfo.release.episodes_total
+                      ? releaseInfo.release.episodes_total
+                      : "?"}
+                  </p>
+                  <p>{releaseInfo.release.description}</p>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article className="grid">
+            <div className="row s12">
+              <i>hub</i>
+              <h5>Связанные релизы</h5>
+            </div>
+            <nav className="s12 scroll">
+              {releaseInfo.release.related_releases.map((item) => {
+                if (item.id == props.id) {
+                  return "";
+                }
+                return (
+                  <ReleaseCard
+                    className={"s1"}
+                    key={item.id}
+                    id={item.id}
+                    title={item.title_ru}
+                    poster={item.image}
+                    description={""}
+                    height={400}
+                  />
+                );
+              })}
             </nav>
-          </div>
+          </article>
+        </>
+      ) : (
+        <div className="center-align">
+          <progress className="circle" />
         </div>
-      </div>
-    </article>
+      )}
+    </>
   );
 };
diff --git a/frontend/app/release/[id]/page.js b/frontend/app/release/[id]/page.js
index 4c9d4ea..67239b3 100644
--- a/frontend/app/release/[id]/page.js
+++ b/frontend/app/release/[id]/page.js
@@ -7,6 +7,8 @@ export default function Release(props) {
   return (
     <>
       <ReleasePlayer id={props.params.id} />
+      <span style={{ marginBlock: "2rem" }}></span>
+      <ReleaseInfo id={props.params.id} />
     </>
   );
 }