scroll to top added

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 (
+    <div className="w-full">
+      <div onClick={() => setClicked((prev) => prev + 1)}>
+        <ScrollToTop />
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default layout;

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 (
+    <div
+      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,
+        },
+      )}>
+      <ChevronUp />
+    </div>
+  );
+};
+
+export default ScrollToTop;

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
           <div>
             <svg
               xmlns="http://www.w3.org/2000/svg"

components/quiz/QuizQuestion.tsx

@@ -15,26 +15,26 @@ type TProps = {
 };
 
 const numbers = [
-  'Birinji sorag',
-  'Ikinji sorag',
-  'Üçünji sorag',
-  'Dördünji sorag',
-  'Bäşinji sorag',
-  'Altynjy sorag',
-  'Ýedinji sorag',
-  'Sekizinji sorag',
-  'Dokuzynjy sorag',
-  'Onunjy sorag',
-  'On Birinji sorag',
-  'On Ikinji sorag',
-  'On Üçünji sorag',
-  'On Dördünji sorag',
-  'On Bäşinji sorag',
-  'On Altynji sorag',
-  'On Ýeddi sorag',
-  'On Sekiznji sorag',
-  'On Dokuzunji sorag',
-  'Ýigrinci sorag',
+  'Birinji sowal',
+  'Ikinji sowal',
+  'Üçünji sowal',
+  'Dördünji sowal',
+  'Bäşinji sowal',
+  'Altynjy sowal',
+  'Ýedinji sowal',
+  'Sekizinji sowal',
+  'Dokuzynjy sowal',
+  'Onunjy sowal',
+  'On Birinji sowal',
+  'On Ikinji sowal',
+  'On Üçünji sowal',
+  'On Dördünji sowal',
+  'On Bäşinji sowal',
+  'On Altynji sowal',
+  'On Ýeddi sowal',
+  'On Sekiznji sowal',
+  'On Dokuzunji sowal',
+  'Ýigrinci sowal',
 ];
 
 const QuizQuestion = ({

components/quiz/QuizWinnerTable.tsx

@@ -331,12 +331,12 @@ const QuizWinnerTable = ({ quizId, quizFinished, smsNumber }: IProps) => {
 
             {winnersData?.data[0].total_score_of_client ? (
               <div className="text-center flex justify-center items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[75px] w-[100%]">
-                <span>Балы за быстроту</span>
+                <span>Soraglara jogap berilişiň nobaty </span>
               </div>
             ) : null}
             {winnersData?.data[0].total_score_of_client ? (
               <div className="text-center flex justify-center items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[99px] w-[100%]">
-                <span>Utuklaryň jemi</span>
+                <span>Nobatlaryň jemi</span>
               </div>
             ) : null}
           </div>

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;