Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Kentai Radiquum 2024-04-30 18:34:56 +05:00
parent cd7fdf7317
commit 99f7b4cdbb
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 59 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
frontend/app/components/Release/ReleaseInfo.jsx
View file

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

2
frontend/app/release/[id]/page.js
View file

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