Refactor imports and optimize component code for better performance and readability

This commit is contained in:
Yussif Yahuza 2025-04-28 00:15:07 +00:00
parent 4a0603b1a8
commit c8144b9d36
9 changed files with 16 additions and 19 deletions

View File

@ -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">&quot;Wade Harper! What is up, old friend! It&apos;s been too long, man!&quot; exclaims HANDSOME TWIN #1.</p>
<p className="text-lg">HANDSOME TWIN #2, more anxious and pushy, quickly interjects, &quot;So do you have it for us?&quot;</p>
<p className="text-lg">Wade reaches into his breast pocket.</p>
<p className="text-lg">"Yes, I do."</p>
<p className="text-lg">&quot;Yes, I do.&quot;</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">&quot;Man, yes! Didn&apos;t I tell you not to question this man! I knew he was going to come through for us!&quot; Handsome Twin #1 gloats.</p>
<p className="text-lg">Handsome Twin #2 sighs in satisfaction. &quot;<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' />,&quot; 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">&quot;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 Evans 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,&rdquo; Wade explains.</p>
</div>
</>
)

View File

@ -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';

View File

@ -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"

View File

@ -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";

View File

@ -1,7 +1,6 @@
'use client'
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import {
HoverCard,

View File

@ -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,

View File

@ -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

View File

@ -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';

View File

@ -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