feat: add Show Releases Pages. fix: hover handling on touchscreens

This commit is contained in:
Kentai Radiquum 2024-07-13 05:21:06 +05:00
parent b0246aa4e5
commit 7f2b4f17a4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
9 changed files with 168 additions and 43 deletions

View file

@ -1,45 +1,53 @@
"use client";
import useSWR from "swr";
import { ReleaseCourusel } from "./components/ReleaseCourusel/ReleaseCourusel";
import { Spinner } from "./components/Spinner/Spinner";
const fetcher = (...args) => fetch(...args).then((res) => res.json());
function fetchReleases(status) {
const { data, error, isLoading } = useSWR(
`/api/home?status=${status}`,
fetcher
);
return [data, error, isLoading];
const { data } = useSWR(`/api/home?status=${status}`, fetcher);
return [data];
}
export default function Home() {
const [lastReleasesData, lastReleasesError, lastReleasesIsLoading] =
fetchReleases("last");
const [
finishedReleasesData,
finishedReleasesError,
finishedReleasesIsLoading,
] = fetchReleases("finished");
const [ongoingReleasesData, ongoingReleasesError, ongoingReleasesIsLoading] =
fetchReleases("ongoing");
const [
announceReleasesData,
announceReleasesError,
announceReleasesIsLoading,
] = fetchReleases("announce");
const [lastReleasesData] = fetchReleases("last");
const [finishedReleasesData] = fetchReleases("finished");
const [ongoingReleasesData] = fetchReleases("ongoing");
const [announceReleasesData] = fetchReleases("announce");
return (
<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} />
{lastReleasesData ? (
<ReleaseCourusel
sectionTitle="Последние релизы"
showAllLink="/home/last"
content={lastReleasesData.content}
/>
) : (
<div className="flex items-center justify-center min-w-full min-h-screen">
<Spinner />
</div>
)}
{finishedReleasesData && (
<ReleaseCourusel id="home-courusel-finished" sectionTitle="Завершенные релизы" showAllLink="/finished" content={finishedReleasesData.content} />
<ReleaseCourusel
sectionTitle="Завершенные релизы"
showAllLink="/home/finished"
content={finishedReleasesData.content}
/>
)}
{ongoingReleasesData && (
<ReleaseCourusel id="home-courusel-ongoing" sectionTitle="В эфире" showAllLink="/ongoing" content={ongoingReleasesData.content} />
<ReleaseCourusel
sectionTitle="В эфире"
showAllLink="/home/ongoing"
content={ongoingReleasesData.content}
/>
)}
{announceReleasesData && (
<ReleaseCourusel id="home-courusel-announce" sectionTitle="Анонсированные релизы" showAllLink="/announce" content={announceReleasesData.content} />
<ReleaseCourusel
sectionTitle="Анонсированные релизы"
showAllLink="/home/announce"
content={announceReleasesData.content}
/>
)}
</main>
);