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

feat: add release episode counts

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-11 20:16:58 +05:00
parent 894fe14eaf
commit b0246aa4e5
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 48 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/ReleaseCourusel/ReleaseCourusel.jsx
View file

@ -36,7 +36,7 @@ export const ReleaseCourusel = (props) => {
return ( return (
<section className={`${Styles.section}`}> <section className={`${Styles.section}`}>
<div className="flex justify-between px-4 border-b-2 border-black"> <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}> <Link href={props.showAllLink}>
<div className="flex items-center"> <div className="flex items-center">
<p className="hidden text-xl font-bold sm:block">Показать все</p> <p className="hidden text-xl font-bold sm:block">Показать все</p>

72
app/components/ReleaseLink/ReleaseLink.jsx
View file

@ -4,34 +4,54 @@ export const ReleaseLink = (props) => {
const grade = props.grade.toFixed(1); const grade = props.grade.toFixed(1);
return ( return (
<Link href={`/release/${props.id}`}> <Link href={`/release/${props.id}`}>
<div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px]"> <div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px] group">
<div className="relative w-full h-full bg-gradient-to-t from-black to-transparent"> <div className="relative w-full h-full overflow-hidden bg-gradient-to-t from-black to-transparent">
<img <img
className="absolute object-cover w-full h-full mix-blend-overlay" className="absolute z-0 object-cover w-full h-full transition mix-blend-overlay group-hover:scale-110"
src={props.image} src={props.image}
alt="" alt=""
/> />
<div <div
className={`absolute left-2 top-2 rounded-sm ${ className={`absolute left-2 top-2 rounded-sm ${
grade == 0 grade == 0
? "hidden" ? "hidden"
: grade < 2 : grade < 2
? "bg-red-500" ? "bg-red-500"
: grade < 3 : grade < 3
? "bg-orange-500" ? "bg-orange-500"
: grade < 4 : grade < 4
? "bg-yellow-500" ? "bg-yellow-500"
: "bg-green-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> <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">
</div> {grade}
<div className="absolute bg-gray-500 rounded-sm top-2 right-2"> </p>
<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> </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>
</div>
</Link> </Link>
); );
}; };

2
app/page.js
View file

@ -28,7 +28,7 @@ export default function Home() {
] = fetchReleases("announce"); ] = fetchReleases("announce");
return ( 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 && ( {lastReleasesData && (
<ReleaseCourusel id="home-courusel-last" sectionTitle="Последние релизы" showAllLink="/last" content={lastReleasesData.content} /> <ReleaseCourusel id="home-courusel-last" sectionTitle="Последние релизы" showAllLink="/last" content={lastReleasesData.content} />
)} )}