Wodey/wodey-prototype
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates on the hoverCard to suport image and videos

Browse Source
This commit is contained in:
pious2847 2025-04-28 12:01:41 +00:00
parent 2985361a8d
commit 51a2581a1f
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/creator/reader/page.tsx
View File

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

11
components/cards/HoverCards.tsx
View File

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