From 4dda1c2c71b2687817ca3d393cb58263dfa2b78d Mon Sep 17 00:00:00 2001
From: pious2847 <abdulhafis2847@gmail.com>
Date: Sun, 27 Apr 2025 21:01:52 +0000
Subject: [PATCH] Add wheel navigation and update header with back button

---
 app/creator/reader/page.tsx | 64 +++++++++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
index 89cc3de..7aa332f 100644
--- a/app/creator/reader/page.tsx
+++ b/app/creator/reader/page.tsx
@@ -1,10 +1,12 @@
 "use client"
 
-import { Setting2 } from 'iconsax-react';
+import { ArrowLeft2, Setting2 } from 'iconsax-react';
 import Image from 'next/image';
 import React, { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import HoverCards from '@/components/cards/HoverCards';
+import { Button } from '@/components/ui/button';
+
 
 interface Page {
     id: number;
@@ -17,6 +19,45 @@ export default function Reader() {
     const [transitioning, setTransitioning] = useState(false);
     const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
 
+    // Add wheel event handler
+    const handleWheel = (event: WheelEvent) => {
+        if (transitioning) return;
+
+        // Scroll down
+        if (event.deltaY > 0) {
+            handleNextPage();
+        }
+        // Scroll up
+        else if (event.deltaY < 0) {
+            handlePreviousPage();
+        }
+    };
+
+    // Add previous page handler
+    const handlePreviousPage = () => {
+        if (transitioning) return;
+
+        setTransitioning(true);
+
+        if (currentPageIndex > 0) {
+            setCurrentPageIndex(prev => prev - 1);
+        } else {
+            setCurrentPageIndex(pages.length - 1);
+        }
+
+        setTimeout(() => {
+            setTransitioning(false);
+        }, 1000);
+    };
+
+    // Add useEffect for wheel event listener
+    useEffect(() => {
+        window.addEventListener('wheel', handleWheel);
+        return () => {
+            window.removeEventListener('wheel', handleWheel);
+        };
+    }, [currentPageIndex, transitioning]); // Add dependencies
+
     // Content structured to match your design
     const pages: Page[] = [
         {
@@ -59,8 +100,8 @@ export default function Reader() {
                         <p className="text-lg">Man, yes! Didn't I tell you not to question this man! I knew he was going to come through for us!" Handsome Twin #1 gloats.</p>
                         <p className="text-lg">Handsome Twin #2 sighs in satisfaction. " <HoverCards triggerText="Gold" videourl="/videos/trend.mp4" description="Bloomberg, COMEX, Dubai Gold & Commodities Exchange, ICE Benchmark Administration, London Metal Exchange, Multi Commodity Exchange of India, Nasdaq, Shanghai Gold Exchange, Shanghai Futures Exchange, Tokyo Commodities Exchange, World Gold Council;" link=' https://www.gold.org/goldhub/data/gold-trading' />" he says, his tense demeanor turning to relief.</p>
                         <p className="text-lg">Wade hands the device to Handsome Twin #2.</p>
-                        <p className="text-lg">"You will find all of the credentials you need on the drive. The shipment will arrive at the <HoverCards triggerText="Port of Dreytown" videourl="/videos/man.mp4" 
-                        description="A young, sobbing visitor sat unusually close to the pulpit in the empty church, catching Pastor Evan’s attention.  
+                        <p className="text-lg">"You will find all of the credentials you need on the drive. The shipment will arrive at the <HoverCards triggerText="Port of Dreytown" videourl="/videos/man.mp4"
+                            description="A young, sobbing visitor sat unusually close to the pulpit in the empty church, catching Pastor Evan’s attention.  
                                         Typically, even regular members avoided those front pews, out of reverence, fear, or habit.  
                                         But this man seemed untouched by such conventions, and that stood out to the pastor..." link='' /> tomorrow night," Wade explains.</p>
                     </div>
@@ -109,12 +150,17 @@ export default function Reader() {
             {/* NavBar */}
             <div className='w-full h-[80px] fixed top-0 z-30 flex items-center justify-between px-6 bg-transparent'>
                 {/* Logo */}
-                <Link href="/">
-                    <div className="flex items-center text-white">
-                        <Image src="/images/logo2.png" alt="Wodey" width={60} height={60} className='mr-2' />
-                        <span className="text-xl font-semibold">Wodey</span>
-                    </div>
-                </Link>
+
+
+                <div className="flex items-center text-white">
+                    <Link href='/creator' className='mr-4 '>
+                        <Button size="icon" className="bg-white">
+                            <ArrowLeft2 size="24" color="#555555" />
+                        </Button>
+                    </Link>
+                    <Image src="/images/logo2.png" alt="Wodey" width={60} height={60} className='mr-2' />
+                    <span className="text-xl font-semibold">Wodey</span>
+                </div>
 
                 {/* Brutal Logo - Center */}
                 <div className="absolute left-1/2 transform -translate-x-1/2">