From 0ce510119a9c4830b0435c28b65bd4479e05a67b Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Sat, 9 Nov 2024 16:01:45 +0500
Subject: [PATCH] fix

---
 app/(main)/quiz/layout.tsx | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/(main)/quiz/layout.tsx b/app/(main)/quiz/layout.tsx
index e034a79..36f4bcd 100644
--- a/app/(main)/quiz/layout.tsx
+++ b/app/(main)/quiz/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 import ScrollToTop from '@/components/global/ScrollToTop';
 import useScrollToTop from '@/lib/hooks/useScrollToTop';
+import { cn } from '@/lib/utils';
 import { ChevronUp } from 'lucide-react';
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 
@@ -8,14 +9,38 @@ const layout = ({ children }: PropsWithChildren) => {
   const [clicked, setClicked] = useState(0);
 
   useEffect(() => {
-    window.scrollTo(0, -100);
+    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 (
-    <div className="w-full">
-      <div onClick={() => setClicked((prev) => prev + 1)}>
-        <ScrollToTop />
+    <div className="relative overflow-x-hidden">
+      <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,
+          },
+        )}
+        onClick={() => setClicked((prev) => prev + 1)}>
+        <ChevronUp />
       </div>
+
       {children}
     </div>
   );