feat(frontend/releases): add release info and related releases cards

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">
+      {releaseInfo ? (
-        <div class="s6">
+        <>
-          <img class="responsive" src={releaseInfo.release.image} />
+          <article className="no-padding fill">
+            <div className="grid no-space">
+              <div className="s3">
+                <img className="responsive" src={releaseInfo.release.image} />
               </div>
-        <div class="s6">
+              <div className="s9">
-          <div class="padding">
+                <div className="padding">
-            <h5>Title</h5>
+                  <h5>{releaseInfo.release.title_ru}</h5>
-            <p>
+                  <h6 className="small no-margin">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                    {releaseInfo.release.title_original}
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </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>
-            <nav>
+                  <p>{releaseInfo.release.description}</p>
-              <button class="border round">Button</button>
-            </nav>
                 </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>
+          </article>
+        </>
+      ) : (
+        <div className="center-align">
+          <progress className="circle" />
+        </div>
+      )}
+    </>
   );
 };

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} />
     </>
   );
 }