114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, use } from 'react';
|
|
import { ResourceCard } from '@/components/ResourceCard';
|
|
import { getLessons } from '@/lib/actions/lessonActions';
|
|
import { getCategories } from '@/lib/actions/categoryActions';
|
|
import { Search, Code2, SlidersHorizontal, Loader2 } from 'lucide-react';
|
|
|
|
export default function LessonsPage({ params }: { params: Promise<{ locale: string }> }) {
|
|
const { locale } = use(params);
|
|
const [search, setSearch] = useState('');
|
|
const [selectedCat, setSelectedCat] = useState<string | null>(null);
|
|
const [lessons, setLessons] = useState<any[]>([]);
|
|
const [categories, setCategories] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
getCategories().then(setCategories);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
setLoading(true);
|
|
const res = await getLessons({ query: search, category: selectedCat || undefined });
|
|
setLessons(res);
|
|
setLoading(false);
|
|
}
|
|
loadData();
|
|
}, [search, selectedCat]);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8 flex-1 w-full">
|
|
|
|
{/* Header */}
|
|
<div className="space-y-3">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
|
|
<Code2 className="w-4 h-4" />
|
|
<span>YouTube Content & Code Library</span>
|
|
</div>
|
|
<h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
|
|
All Video Tutorials & Code Resources
|
|
</h1>
|
|
<p className="text-sm text-slate-400 max-w-2xl">
|
|
Browse, filter, and inspect all source code snippets, lesson notes, starter zip packages, and multi-file project structures.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Filter Bar */}
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4 bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
|
|
|
|
{/* Search Input */}
|
|
<div className="relative w-full md:w-96">
|
|
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search tutorial title or code..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
|
/>
|
|
</div>
|
|
|
|
{/* Category Pills */}
|
|
<div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto py-1 scrollbar-none">
|
|
<SlidersHorizontal className="w-4 h-4 text-slate-500 mr-1 flex-shrink-0" />
|
|
<button
|
|
onClick={() => setSelectedCat(null)}
|
|
className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
|
|
selectedCat === null
|
|
? 'bg-red-600 text-white shadow-md shadow-red-600/30'
|
|
: 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
{categories.map((cat) => (
|
|
<button
|
|
key={cat.id || cat.name}
|
|
onClick={() => setSelectedCat(selectedCat === cat.name ? null : cat.name)}
|
|
className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
|
|
selectedCat === cat.name
|
|
? 'bg-red-600 text-white shadow-md shadow-red-600/30'
|
|
: 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
|
|
}`}
|
|
>
|
|
{cat.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
{loading ? (
|
|
<div className="p-12 text-center text-slate-400 flex items-center justify-center gap-2">
|
|
<Loader2 className="w-5 h-5 animate-spin text-red-500" />
|
|
<span>Loading tutorials...</span>
|
|
</div>
|
|
) : lessons.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{lessons.map((item) => (
|
|
<ResourceCard key={item.id} lesson={item} locale={locale} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-12 text-center bg-slate-900/40 rounded-2xl border border-slate-800 text-slate-400 text-xs">
|
|
No YouTube tutorials match your search filters.
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|