From 51a2581a1f1a8e06918e1aca58f33c028a3ba9cc Mon Sep 17 00:00:00 2001
From: pious2847 <abdulhafis2847@gmail.com>
Date: Mon, 28 Apr 2025 12:01:41 +0000
Subject: [PATCH] Updates on the hoverCard to suport image and videos

---
 app/creator/reader/page.tsx     |  4 ++--
 components/cards/HoverCards.tsx | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
index 7aa332f..a531501 100644
--- a/app/creator/reader/page.tsx
+++ b/app/creator/reader/page.tsx
@@ -67,7 +67,7 @@ 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">Through the rain, flickering neon lights spell out of  <HoverCards triggerText="SEPHORA" videourl="/videos/usb.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' /> and illuminate an entrance to nightclub.</p>
+                        <p className="text-lg">Through the rain, flickering neon lights spell out of  <HoverCards triggerText="SEPHORA" videourl="/images/card1.png" isImage={true} 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' /> and illuminate an entrance to nightclub.</p>
                         <p className="text-lg">A stunning light show cascades across a dance floor crowded by partiers and adorned by dozens of video monitors.</p>
                         <p className="text-lg">WADE HARPER, an anxious businessman dressed in a black suit, follows two burly bouncers up a flight of stairs toward the  <HoverCards triggerText="VIP Suite" videourl="/videos/background2.mp4" description='"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.  Handsome Twin #2 sighs in satisfaction. “Gold!,” he says, his tense demeanor turning to relief. ' /> at the back of the warehouse.</p>
                     </div>
@@ -85,7 +85,7 @@ export default function Reader() {
                         <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">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 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.</div>
                     </div>
                 </>
             )
diff --git a/components/cards/HoverCards.tsx b/components/cards/HoverCards.tsx
index 8e96747..1dcdaf3 100644
--- a/components/cards/HoverCards.tsx
+++ b/components/cards/HoverCards.tsx
@@ -14,7 +14,8 @@ export interface HoverCardsProps {
     videourl: string
     description: string
     linkText?: string
-    link?: string
+    link?: string,
+    isImage?: Boolean,
 }
 
 export default function HoverCards({
@@ -22,7 +23,8 @@ export default function HoverCards({
     videourl,
     description,
     link = '#',
-    linkText = 'Purchase & Read More'
+    linkText = 'Purchase & Read More',
+    isImage
 }: HoverCardsProps) {
     return (
         <HoverCard>
@@ -32,6 +34,9 @@ export default function HoverCards({
             <HoverCardContent className="w-80">
                 <div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg">
                     <div className="relative h-48 w-full">  
+                        {isImage ?
+                        <Image src={videourl} alt={videourl} width={100} height={100} className="absolute top-0 left-0 w-full h-full object-cover"   />
+                        : 
                         <video
                         className="absolute top-0 left-0 w-full h-full object-cover"
                         muted
@@ -40,6 +45,8 @@ export default function HoverCards({
                         autoPlay
                         src={videourl}
                         ></video>
+                    }
+                       
                       
                     </div>