47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { Play } from "lucide-react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
|
|
interface VideoCardProps {
|
|
title: string
|
|
description: string
|
|
thumbnail: string
|
|
duration: string
|
|
youtubeUrl: string
|
|
}
|
|
|
|
export function VideoCard({
|
|
title,
|
|
description,
|
|
thumbnail,
|
|
duration,
|
|
youtubeUrl,
|
|
}: VideoCardProps) {
|
|
return (
|
|
<a href={youtubeUrl} target="_blank" rel="noopener noreferrer">
|
|
<Card className="overflow-hidden hover:shadow-lg transition-shadow group cursor-pointer">
|
|
<div className="relative aspect-video">
|
|
<img
|
|
src={thumbnail}
|
|
alt={title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
|
|
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Play className="w-8 h-8 text-[#8BC34A] ml-1" />
|
|
</div>
|
|
</div>
|
|
<span className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
|
|
{duration}
|
|
</span>
|
|
</div>
|
|
<CardContent className="pt-4 space-y-2">
|
|
<h3 className="font-bold text-lg">{title}</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
)
|
|
}
|