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