Refactor imports and optimize component code for better performance and readability
This commit is contained in:
parent
4a0603b1a8
commit
c8144b9d36
@ -2,7 +2,7 @@
|
||||
|
||||
import { ArrowLeft2, Setting2 } from 'iconsax-react';
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import HoverCards from '@/components/cards/HoverCards';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@ -20,7 +20,7 @@ export default function Reader() {
|
||||
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
|
||||
|
||||
// Add wheel event handler
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
const handleWheel = useCallback((event: WheelEvent) => {
|
||||
if (transitioning) return;
|
||||
|
||||
// Scroll down
|
||||
@ -31,7 +31,7 @@ export default function Reader() {
|
||||
else if (event.deltaY < 0) {
|
||||
handlePreviousPage();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Add previous page handler
|
||||
const handlePreviousPage = () => {
|
||||
@ -56,7 +56,7 @@ export default function Reader() {
|
||||
return () => {
|
||||
window.removeEventListener('wheel', handleWheel);
|
||||
};
|
||||
}, [currentPageIndex, transitioning]); // Add dependencies
|
||||
}, [currentPageIndex, transitioning, handleWheel]); // Add dependencies
|
||||
|
||||
// Content structured to match your design
|
||||
const pages: Page[] = [
|
||||
@ -81,10 +81,10 @@ export default function Reader() {
|
||||
<>
|
||||
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
|
||||
<div className="space-y-6 text-center max-w-3xl">
|
||||
<p className="text-lg">"Wade Harper! What is up, old friend! It's been too long, man!" exclaims HANDSOME TWIN #1.</p>
|
||||
<p className="text-lg">HANDSOME TWIN #2, more anxious and pushy, quickly interjects, "So do you have it for us?"</p>
|
||||
<p className="text-lg">"Wade Harper! What is up, old friend! It's been too long, man!" exclaims HANDSOME TWIN #1.</p>
|
||||
<p className="text-lg">HANDSOME TWIN #2, more anxious and pushy, quickly interjects, "So do you have it for us?"</p>
|
||||
<p className="text-lg">Wade reaches into his breast pocket.</p>
|
||||
<p className="text-lg">"Yes, I do."</p>
|
||||
<p className="text-lg">"Yes, I do."</p>
|
||||
<p className="text-lg">Wade considers the <HoverCards triggerText="USB drive" videourl="/videos/usb.mp4" description="The USB drive Wade carries holds classified footage from a secret government surveillance project called Project Echo, which monitored paranormal activities around an abandoned research facility in Nevada." /> in his hand and fiddles with the device. The twins smile widely with delight.</p>
|
||||
</div>
|
||||
</>
|
||||
@ -97,13 +97,13 @@ export default function Reader() {
|
||||
<>
|
||||
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
|
||||
<div className="space-y-6 text-center max-w-3xl">
|
||||
<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">"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"
|
||||
<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>
|
||||
But this man seemed untouched by such conventions, and that stood out to the pastor..." link='' /> tomorrow night,” Wade explains.</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Heart } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
@ -39,7 +39,7 @@ export default function QuickActions() {
|
||||
<div className="relative w-full">
|
||||
{/* Top linear gradient image bar */}
|
||||
<div className="absolute top-0 left-0 w-full h-3 z-10">
|
||||
<img src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
|
||||
<Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div
|
||||
className="w-full flex flex-col items-center gap-6 py-8 px-20 relative z-20"
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { FaSlidersH } from "react-icons/fa";
|
||||
import Recent_Card from "./Recent_Card";
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
HoverCard,
|
||||
|
||||
@ -10,7 +10,7 @@ import ActionButtons from "./ActionButtons";
|
||||
import {
|
||||
ArrowLeft2, ArrowRight2, AudioSquare, Cardano, Chart, CodeCircle,
|
||||
Element2, ExportSquare, Gift, Link, LinkSquare, Magicpen,
|
||||
MessageAdd1, MessageQuestion, Next, Note, Photoshop, Previous,
|
||||
MessageAdd1, MessageQuestion, Next, Note, Previous,
|
||||
SearchNormal1,
|
||||
Setting2, Setting4, Shapes, Smallcaps, Snapchat, Spotify,
|
||||
Sticker,
|
||||
|
||||
@ -56,7 +56,7 @@ export default function BestSeller() {
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book, idx) => (
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image';
|
||||
import { CopyPlus, Trash2, Plus, X } from 'lucide-react';
|
||||
import { CopyPlus, Trash2, Plus } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ export default function NewRelease() {
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book, idx) => (
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
|
||||
Loading…
Reference in New Issue
Block a user