From c8144b9d36f605c86e6e25a2e860f38e51dc1db2 Mon Sep 17 00:00:00 2001
From: Yussif Yahuza <yussifyahuza12@gmail.com>
Date: Mon, 28 Apr 2025 00:15:07 +0000
Subject: [PATCH] Refactor imports and optimize component code for better
 performance and readability

---
 app/creator/reader/page.tsx                   | 22 +++++++++----------
 .../artists/_components/Artist_Content.tsx    |  1 -
 .../artists/_components/Quick_Actions.tsx     |  2 +-
 components/Recent_Creation.tsx                |  1 -
 components/cards/HoverCards.tsx               |  1 -
 components/common/SideBar.tsx                 |  2 +-
 components/custom/Best_Seller.tsx             |  2 +-
 components/custom/Frame.tsx                   |  2 +-
 components/custom/New_Release.tsx             |  2 +-
 9 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
index 7aa332f..1797d0e 100644
--- a/app/creator/reader/page.tsx
+++ b/app/creator/reader/page.tsx
@@ -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 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,&rdquo; Wade explains.</p>
                     </div>
                 </>
             )
diff --git a/app/marketplace/artists/_components/Artist_Content.tsx b/app/marketplace/artists/_components/Artist_Content.tsx
index 29cdc24..a45e91a 100644
--- a/app/marketplace/artists/_components/Artist_Content.tsx
+++ b/app/marketplace/artists/_components/Artist_Content.tsx
@@ -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';
diff --git a/app/marketplace/artists/_components/Quick_Actions.tsx b/app/marketplace/artists/_components/Quick_Actions.tsx
index 94253ee..9d5e34b 100644
--- a/app/marketplace/artists/_components/Quick_Actions.tsx
+++ b/app/marketplace/artists/_components/Quick_Actions.tsx
@@ -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"
diff --git a/components/Recent_Creation.tsx b/components/Recent_Creation.tsx
index 0fe942c..85fb620 100644
--- a/components/Recent_Creation.tsx
+++ b/components/Recent_Creation.tsx
@@ -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";
diff --git a/components/cards/HoverCards.tsx b/components/cards/HoverCards.tsx
index 8e96747..fcac5ca 100644
--- a/components/cards/HoverCards.tsx
+++ b/components/cards/HoverCards.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
 import {
     HoverCard,
diff --git a/components/common/SideBar.tsx b/components/common/SideBar.tsx
index fd7431d..2d695a1 100644
--- a/components/common/SideBar.tsx
+++ b/components/common/SideBar.tsx
@@ -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,
diff --git a/components/custom/Best_Seller.tsx b/components/custom/Best_Seller.tsx
index 1012eb7..76eda50 100644
--- a/components/custom/Best_Seller.tsx
+++ b/components/custom/Best_Seller.tsx
@@ -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
diff --git a/components/custom/Frame.tsx b/components/custom/Frame.tsx
index ad6b1f6..b7b6140 100644
--- a/components/custom/Frame.tsx
+++ b/components/custom/Frame.tsx
@@ -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';
 
diff --git a/components/custom/New_Release.tsx b/components/custom/New_Release.tsx
index b784f0d..d0483cd 100644
--- a/components/custom/New_Release.tsx
+++ b/components/custom/New_Release.tsx
@@ -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