35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { mdiPlayCircle } from '@mdi/js';
|
|
import BaseIcon from './BaseIcon';
|
|
|
|
const VideoCard = ({ video }) => {
|
|
const thumbnailUrl = video.thumbnail?.[0]?.url || 'https://via.placeholder.com/400x225?text=No+Thumbnail';
|
|
|
|
return (
|
|
<div className="group relative bg-gray-900 rounded-2xl overflow-hidden transition-transform duration-300 hover:scale-105 shadow-xl">
|
|
<div className="aspect-video relative">
|
|
<img
|
|
src={thumbnailUrl}
|
|
alt={video.title}
|
|
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<BaseIcon path={mdiPlayCircle} size={64} className="text-white drop-shadow-lg" />
|
|
</div>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-white font-bold text-lg line-clamp-1">{video.title || 'Untitled Video'}</h3>
|
|
<p className="text-gray-400 text-sm line-clamp-2 mt-1">{video.description || 'No description available.'}</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{video.tags?.slice(0, 3).map((tag) => (
|
|
<span key={tag.id} className="text-[10px] uppercase tracking-wider bg-violet-500/20 text-violet-400 px-2 py-1 rounded-full border border-violet-500/30">
|
|
{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoCard; |