Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

This commit is contained in:
Kakabay 2024-11-09 16:13:10 +05:00
parent 0ce510119a
commit 8fb69b0c73
3 changed files with 13 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/(main)/quiz/layout.tsx
View File

@ -1,45 +1,13 @@
'use client';
import ScrollToTop from '@/components/global/ScrollToTop'; import ScrollToTop from '@/components/global/ScrollToTop';
import useScrollToTop from '@/lib/hooks/useScrollToTop'; import useScrollToTop from '@/lib/hooks/useScrollToTop';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { ChevronUp } from 'lucide-react'; import { ChevronUp } from 'lucide-react';
import React, { PropsWithChildren, useEffect, useState } from 'react'; import React, { PropsWithChildren } from 'react';
const layout = ({ children }: PropsWithChildren) => { const layout = ({ children }: PropsWithChildren) => {
const [clicked, setClicked] = useState(0);
useEffect(() => {
window.scrollTo(0, 0);
console.log('first');
}, [clicked]);
const [scrollY, setScrollY] = useState(false);
const handleScroll = () => {
setScrollY(window.scrollY > 500 ? true : false);
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return ( return (
<div className="relative overflow-x-hidden"> <div className="">
<div <ScrollToTop />
className={cn(
'fixed md:bottom-10 md:right-10 bottom-4 right-4 p-3 shadow-md bg-fillBGBlockbg rounded-full cursor-pointer z-20 transition-all duration-300 ease-in-out',
{
'opacity-100 pointer-events-auto': scrollY,
'opacity-0 pointer-events-none': !scrollY,
},
)}
onClick={() => setClicked((prev) => prev + 1)}>
<ChevronUp />
</div>
{children} {children}
</div> </div>

2
app/layout.tsx
View File

@ -50,7 +50,7 @@ export default function RootLayout({ children }: IProps) {
<head> <head>
<link rel="icon" href="/logo.png" sizes="any" /> <link rel="icon" href="/logo.png" sizes="any" />
</head> </head>
<body className="-z-0 relative"> <body className="relative overflow-x-hidden">
<QueryProvider>{children}</QueryProvider> <QueryProvider>{children}</QueryProvider>
</body> </body>

10
components/global/ScrollToTop.tsx
View File

@ -19,6 +19,13 @@ const ScrollToTop = () => {
}; };
}, []); }, []);
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
return ( return (
<div <div
className={cn( className={cn(
@ -27,7 +34,8 @@ const ScrollToTop = () => {
'opacity-100 pointer-events-auto': scrollY, 'opacity-100 pointer-events-auto': scrollY,
'opacity-0 pointer-events-none': !scrollY, 'opacity-0 pointer-events-none': !scrollY,
}, },
)}> )}
onClick={scrollToTop}>
<ChevronUp /> <ChevronUp />
</div> </div>
); );