60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Link from 'next/link'
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@/components/ui/hover-card"
|
|
|
|
export interface HoverCardsProps {
|
|
triggerText: string
|
|
videourl: string
|
|
description: string
|
|
linkText?: string
|
|
link?: string
|
|
}
|
|
|
|
export default function HoverCards({
|
|
triggerText,
|
|
videourl,
|
|
description,
|
|
link = '#',
|
|
linkText = 'Purchase & Read More'
|
|
}: HoverCardsProps) {
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<p className="text-blue-400 cursor-pointer underline">{triggerText}</p>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-80">
|
|
<div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg">
|
|
<div className="relative h-48 w-full">
|
|
<video
|
|
className="absolute top-0 left-0 w-full h-full object-cover"
|
|
muted
|
|
loop
|
|
playsInline
|
|
autoPlay
|
|
src={videourl}
|
|
></video>
|
|
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<p className="text-gray-700 text-sm mb-4">
|
|
{description}
|
|
</p>
|
|
|
|
<Link href={link}>
|
|
<span className="text-purple-700 font-medium text-sm hover:text-purple-900 transition-colors">
|
|
{linkText}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
} |