first commit

2026-07-23 16:55:44 +03:00
commit bd543c3bda
61 changed files with 17313 additions and 0 deletions
@@ -0,0 +1,113 @@
+'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>
+  );
+}