Skip to content
Snippets Groups Projects
Commit df762b41 authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

scroll to top btn

parent 127081b1
No related branches found
No related tags found
1 merge request!12Feat.back to top button
import Sort from "@/components/filter-sort-games"; import Sort from "@/components/filter-sort-games";
import { InfiniteScrollGames } from "@/components/infinity-scroll"; import { InfiniteScrollGames } from "@/components/infinity-scroll";
import ScrollToTop from "@/components/scroll-to-top";
import SearchInput from "@/components/search-input"; import SearchInput from "@/components/search-input";
// renders a list of games infinitely (presumably) // renders a list of games infinitely (presumably)
export default async function GamesPage() { export default async function GamesPage() {
return ( return (
<main className="relative lg:gap-10 xl:grid xl:grid-cols-[1fr_240px]"> <>
<div className="grid"> <main className="relative lg:gap-10 xl:grid xl:grid-cols-[1fr_240px]">
<div className="flex flex-col gap-10 items-center w-full"> <div className="grid">
<SearchInput className="p-3 lg:w-2/3 2xl:w-1/3" /> <div className="flex flex-col gap-10 items-center w-full">
<SearchInput className="p-3 lg:w-2/3 2xl:w-1/3" />
</div>
<InfiniteScrollGames />
</div> </div>
<InfiniteScrollGames /> <div className="hidden xl:block flex-col md:flex">
</div>
<div className="hidden xl:block flex-col md:flex">
<div className="sticky top-0">
<Sort /> <Sort />
</div> </div>
</main>
<div className="fixed top-6 left-1/2 -ml-7">
<ScrollToTop />
</div> </div>
</main> </>
) )
} }
\ No newline at end of file
...@@ -34,13 +34,9 @@ export default function Sort() { ...@@ -34,13 +34,9 @@ export default function Sort() {
.map((param, index) => (index === 0 ? `?${param}` : `&${param}`)) .map((param, index) => (index === 0 ? `?${param}` : `&${param}`))
.join(''); .join('');
const queryString = `${queryParamString ? `${queryParamString}` : ''}`; const url = `${pathname}${queryParamString ? `${queryParamString}` : ''}`;
const url = `${pathname}${queryString ? `${queryString}` : ''}`; router.replace(url);
useEffect(() => {
router.push(url);
}, [router, url]);
function toggleSortOrder() { function toggleSortOrder() {
const newSortOrder = selectedSortOrder === 'desc' ? 'asc' : 'desc'; const newSortOrder = selectedSortOrder === 'desc' ? 'asc' : 'desc';
......
...@@ -2,6 +2,7 @@ import { ...@@ -2,6 +2,7 @@ import {
AlertTriangle, AlertTriangle,
ArrowDown, ArrowDown,
ArrowRight, ArrowRight,
ArrowUpToLine,
BellRing, BellRing,
Check, Check,
ChevronLeft, ChevronLeft,
...@@ -72,6 +73,7 @@ export const Icons: IconsType = { ...@@ -72,6 +73,7 @@ export const Icons: IconsType = {
moon: Moon, // Dark Mode Toggle Nav moon: Moon, // Dark Mode Toggle Nav
arrowdown: ArrowDown, // Descending Sort arrowdown: ArrowDown, // Descending Sort
heart: Heart, // Like Button heart: Heart, // Like Button
arrowupline: ArrowUpToLine, // Back to Top Button
close: X, close: X,
spinner: Loader2, spinner: Loader2,
chevronLeft: ChevronLeft, chevronLeft: ChevronLeft,
......
...@@ -49,30 +49,32 @@ export function InfiniteScrollGames() { ...@@ -49,30 +49,32 @@ export function InfiniteScrollGames() {
<Card className="p-6"> <Card className="p-6">
{status === 'error' {status === 'error'
? ?
(<span>Error: {(error as Error).message}</span>) (<span>Uh oh... something went wrong: {(error as Error).message}</span>)
: :
(status === 'success' && ( (status === 'success' && (
<InfiniteScroll <InfiniteScroll
dataLength={data?.pages.length * 20} dataLength={data?.pages.length * 20}
next={fetchNextPage} next={fetchNextPage}
hasMore={hasNextPage ? true : false} hasMore={hasNextPage ? true : false}
loader={<h4>Loading more...</h4>} loader={
<h1 className="text-center pt-6">
<b>Trying to load more...</b>
</h1>
}
endMessage={ endMessage={
<p style={{ textAlign: 'center' }}> <h1 className="text-center pt-6">
<b>Yay! You have seen it all</b> <b>Yay! You have seen it all!</b>
</p> </h1>
} }
> >
<div className=""> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8"> {data.pages.map((page, i) => (
{data.pages.map((page, i) => ( <Fragment key={i}>
<Fragment key={i}> {page.map((game: IGame) => (
{page.map((game: IGame) => ( <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
<Game id={game.id} name={game.name} cover={game.cover} key={game.id} /> ))}
))} </Fragment>
</Fragment> ))}
))}
</div>
</div> </div>
</InfiniteScroll> </InfiniteScroll>
))} ))}
......
"use client"
import { cn } from "@/lib/utils";
import { useEffect, useState } from "react";
import { Icons } from "./icons";
import { Button } from "./ui/button";
export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
if (window.pageYOffset > 300) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);
return (
<Button size="lg" onClick={scrollToTop}
className={cn(isVisible ? "block" : "hidden", "")}>
<Icons.arrowupline className="h-3 w-3" aria-hidden="true" />
</Button>
);
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment