109 lines
4.3 KiB
TypeScript
109 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { VideoLesson } from '@/lib/data';
|
|
import { Download, Eye, FileCode2, Clock, ArrowRight, Sparkles } from 'lucide-react';
|
|
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
|
|
|
|
interface ResourceCardProps {
|
|
lesson: VideoLesson;
|
|
locale: string;
|
|
}
|
|
|
|
export function ResourceCard({ lesson, locale }: ResourceCardProps) {
|
|
return (
|
|
<div className="group relative bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700/80 rounded-2xl overflow-hidden transition-all duration-300 flex flex-col justify-between shadow-xl hover:shadow-2xl hover:shadow-red-500/5 hover:-translate-y-1">
|
|
|
|
<div>
|
|
{/* Thumbnail Container */}
|
|
<div className="relative aspect-video w-full overflow-hidden bg-slate-950">
|
|
<img
|
|
src={lesson.thumbnailUrl}
|
|
alt={lesson.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent opacity-80" />
|
|
|
|
{/* Featured Badge */}
|
|
{lesson.isFeatured && (
|
|
<div className="absolute top-3 left-3 flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-600/90 text-white text-[11px] font-bold shadow-lg backdrop-blur-md">
|
|
<Sparkles className="w-3 h-3" />
|
|
<span>FEATURED TUTORIAL</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Category Tag */}
|
|
<div className="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-slate-900/90 border border-slate-700/80 text-slate-200 text-[11px] font-semibold backdrop-blur-md">
|
|
{lesson.category}
|
|
</div>
|
|
|
|
{/* Duration Badge */}
|
|
<div className="absolute bottom-3 right-3 flex items-center gap-1 px-2 py-0.5 rounded bg-slate-950/90 text-slate-300 text-[11px] font-mono border border-slate-800">
|
|
<Clock className="w-3 h-3 text-red-400" />
|
|
<span>{lesson.duration}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Body */}
|
|
<div className="p-5 space-y-3">
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{lesson.tags.slice(0, 3).map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="text-[10px] font-medium px-2 py-0.5 rounded bg-slate-800/60 text-slate-400 border border-slate-800"
|
|
>
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="font-bold text-base text-white group-hover:text-red-400 transition-colors line-clamp-2 leading-snug">
|
|
<Link href={`/${locale}/lessons/${lesson.slug}`}>
|
|
{lesson.title}
|
|
</Link>
|
|
</h3>
|
|
|
|
{/* Summary */}
|
|
<p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
|
|
{lesson.summary}
|
|
</p>
|
|
|
|
{/* Stats Bar */}
|
|
<div className="pt-2 flex items-center justify-between text-[11px] text-slate-400 border-t border-slate-800/60">
|
|
<span className="flex items-center gap-1">
|
|
<FileCode2 className="w-3.5 h-3.5 text-red-400" />
|
|
<span>{lesson.codeSnippets.length} Code Files</span>
|
|
</span>
|
|
|
|
<span className="flex items-center gap-1">
|
|
<Download className="w-3.5 h-3.5 text-emerald-400" />
|
|
<span>{lesson.downloadCount.toLocaleString()} Downloads</span>
|
|
</span>
|
|
|
|
<span className="flex items-center gap-1">
|
|
<Eye className="w-3.5 h-3.5 text-sky-400" />
|
|
<span>{lesson.viewsCount.toLocaleString()} Views</span>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Action Footer */}
|
|
<div className="px-5 pb-5 pt-1">
|
|
<Link
|
|
href={`/${locale}/lessons/${lesson.slug}`}
|
|
className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-200 hover:text-white text-xs font-bold transition-all group-hover:shadow-lg group-hover:shadow-red-600/20"
|
|
>
|
|
<span>View Code & Notes</span>
|
|
<ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|