From a4ebae2e7d124882ab60b02805962f23f438fd4e Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Sat, 9 Nov 2024 15:38:15 +0500 Subject: [PATCH] scroll to top added --- app/(main)/quiz/layout.tsx | 24 +++++++++++++++++ components/global/ScrollToTop.tsx | 36 ++++++++++++++++++++++++++ components/quiz/QuizAccordion.tsx | 2 +- components/quiz/QuizQuestion.tsx | 40 ++++++++++++++--------------- components/quiz/QuizWinnerTable.tsx | 4 +-- lib/hooks/useScrollToTop.ts | 11 ++++++++ 6 files changed, 94 insertions(+), 23 deletions(-) create mode 100644 app/(main)/quiz/layout.tsx create mode 100644 components/global/ScrollToTop.tsx create mode 100644 lib/hooks/useScrollToTop.ts diff --git a/app/(main)/quiz/layout.tsx b/app/(main)/quiz/layout.tsx new file mode 100644 index 0000000..e034a79 --- /dev/null +++ b/app/(main)/quiz/layout.tsx @@ -0,0 +1,24 @@ +'use client'; +import ScrollToTop from '@/components/global/ScrollToTop'; +import useScrollToTop from '@/lib/hooks/useScrollToTop'; +import { ChevronUp } from 'lucide-react'; +import React, { PropsWithChildren, useEffect, useState } from 'react'; + +const layout = ({ children }: PropsWithChildren) => { + const [clicked, setClicked] = useState(0); + + useEffect(() => { + window.scrollTo(0, -100); + }, [clicked]); + + return ( +
+
setClicked((prev) => prev + 1)}> + +
+ {children} +
+ ); +}; + +export default layout; diff --git a/components/global/ScrollToTop.tsx b/components/global/ScrollToTop.tsx new file mode 100644 index 0000000..7b0a343 --- /dev/null +++ b/components/global/ScrollToTop.tsx @@ -0,0 +1,36 @@ +'use client'; +import useScrollToTop from '@/lib/hooks/useScrollToTop'; +import { cn } from '@/lib/utils'; +import { ChevronUp } from 'lucide-react'; +import React, { useEffect, useState } from 'react'; + +const ScrollToTop = () => { + const [scrollY, setScrollY] = useState(false); + + const handleScroll = () => { + setScrollY(window.scrollY > 500 ? true : false); + }; + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + return ( +
+ +
+ ); +}; + +export default ScrollToTop; diff --git a/components/quiz/QuizAccordion.tsx b/components/quiz/QuizAccordion.tsx index 98d8772..568e8b3 100644 --- a/components/quiz/QuizAccordion.tsx +++ b/components/quiz/QuizAccordion.tsx @@ -223,7 +223,7 @@ const QuizAccordion = ({ finished, questionId }: TProps) => { className={`w-full ${ opened ? 'bg-fillRed text-white' : 'bg-fillButtonLowContrastDefault text-textDarkt' } flex items-center justify-center text-xs md:text-base uppercase leading-[150%] p-[8px] md:py-5 gap-[5px] md:gap-[10px] transition-all delay-[0.2s] font-medium `}> - Taryhy gör + Netijeler
{ {winnersData?.data[0].total_score_of_client ? (
- Балы за быстроту + Soraglara jogap berilişiň nobaty
) : null} {winnersData?.data[0].total_score_of_client ? (
- Utuklaryň jemi + Nobatlaryň jemi
) : null}
diff --git a/lib/hooks/useScrollToTop.ts b/lib/hooks/useScrollToTop.ts new file mode 100644 index 0000000..accf58a --- /dev/null +++ b/lib/hooks/useScrollToTop.ts @@ -0,0 +1,11 @@ +'use client'; +import { useEffect } from 'react'; + +const useScrollToTop = (dependecies?: any) => { + useEffect(() => { + window.scrollTo(0, 0); + console.log('first'); + }, [dependecies]); +}; + +export default useScrollToTop;