From dbfd54477d45b557f91cc36f8332f057d689a9e7 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 8 Aug 2025 11:03:44 +0000 Subject: [PATCH] Create tutorials page within docs section cgen-a88704caf8354cab9aaae53a8f519f16 --- client/pages/docs/DocsTutorials.tsx | 366 ++++++++++++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 client/pages/docs/DocsTutorials.tsx diff --git a/client/pages/docs/DocsTutorials.tsx b/client/pages/docs/DocsTutorials.tsx new file mode 100644 index 00000000..920a7f88 --- /dev/null +++ b/client/pages/docs/DocsTutorials.tsx @@ -0,0 +1,366 @@ +import { useState } from "react"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { + Play, + Clock, + User, + Star, + BookOpen, + Code, + Gamepad2, + Database, + Palette, + Brain, + Rocket, + Filter, + Search, + ChevronRight, + Eye, + Heart, +} from "lucide-react"; + +interface DocsTutorial { + id: string; + title: string; + description: string; + category: string; + difficulty: 'beginner' | 'intermediate' | 'advanced'; + duration: string; + author: string; + rating: number; + views: number; + likes: number; + tags: string[]; + isNew?: boolean; + type: 'video' | 'article' | 'interactive'; + path: string; +} + +const docsTutorials: DocsTutorial[] = [ + { + id: "1", + title: "AeThex Platform Quick Start", + description: "Get up and running with AeThex in under 10 minutes. Learn the basics of project creation, navigation, and core features.", + category: "Getting Started", + difficulty: "beginner", + duration: "8 min", + author: "AeThex Team", + rating: 4.9, + views: 5420, + likes: 412, + tags: ["platform", "basics", "quickstart"], + isNew: true, + type: "video", + path: "/docs/tutorials/quickstart" + }, + { + id: "2", + title: "Project Setup and Configuration", + description: "Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.", + category: "Setup", + difficulty: "beginner", + duration: "15 min", + author: "Sarah Chen", + rating: 4.8, + views: 3240, + likes: 287, + tags: ["setup", "configuration", "projects"], + type: "article", + path: "/docs/tutorials/project-setup" + }, + { + id: "3", + title: "Working with the AeThex API", + description: "Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.", + category: "API Integration", + difficulty: "intermediate", + duration: "25 min", + author: "Alex Rodriguez", + rating: 4.7, + views: 2156, + likes: 198, + tags: ["api", "integration", "authentication"], + type: "interactive", + path: "/docs/tutorials/api-integration" + }, + { + id: "4", + title: "Building Games with AeThex Tools", + description: "Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.", + category: "Game Development", + difficulty: "intermediate", + duration: "45 min", + author: "Mike Johnson", + rating: 4.9, + views: 4567, + likes: 523, + tags: ["games", "development", "tools"], + type: "video", + path: "/docs/tutorials/game-development" + }, + { + id: "5", + title: "Advanced Database Patterns", + description: "Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.", + category: "Database", + difficulty: "advanced", + duration: "35 min", + author: "Emma Wilson", + rating: 4.6, + views: 1876, + likes: 165, + tags: ["database", "optimization", "patterns"], + type: "article", + path: "/docs/tutorials/database-patterns" + }, + { + id: "6", + title: "AI Integration Workshop", + description: "Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.", + category: "AI/ML", + difficulty: "advanced", + duration: "60 min", + author: "Dr. Lisa Park", + rating: 4.8, + views: 2943, + likes: 334, + tags: ["ai", "machine-learning", "integration"], + isNew: true, + type: "interactive", + path: "/docs/tutorials/ai-integration" + } +]; + +const categories = [ + { id: "all", name: "All", icon: BookOpen }, + { id: "getting-started", name: "Getting Started", icon: Rocket }, + { id: "setup", name: "Setup", icon: Code }, + { id: "api-integration", name: "API Integration", icon: Database }, + { id: "game-development", name: "Game Development", icon: Gamepad2 }, + { id: "database", name: "Database", icon: Database }, + { id: "ai-ml", name: "AI/ML", icon: Brain }, +]; + +export default function DocsTutorials() { + const [searchTerm, setSearchTerm] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("all"); + const [selectedDifficulty, setSelectedDifficulty] = useState("all"); + const [selectedType, setSelectedType] = useState("all"); + + const getDifficultyColor = (difficulty: string) => { + switch (difficulty) { + case 'beginner': return 'bg-green-500'; + case 'intermediate': return 'bg-yellow-500'; + case 'advanced': return 'bg-red-500'; + default: return 'bg-gray-500'; + } + }; + + const getTypeIcon = (type: string) => { + switch (type) { + case 'video': return Play; + case 'article': return BookOpen; + case 'interactive': return Code; + default: return BookOpen; + } + }; + + const getTypeColor = (type: string) => { + switch (type) { + case 'video': return 'text-red-400'; + case 'article': return 'text-blue-400'; + case 'interactive': return 'text-green-400'; + default: return 'text-gray-400'; + } + }; + + const filteredTutorials = docsTutorials.filter(tutorial => { + const matchesSearch = tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) || + tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) || + tutorial.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())); + const matchesCategory = selectedCategory === "all" || + tutorial.category.toLowerCase().replace(/[\/\s]/g, '-') === selectedCategory; + const matchesDifficulty = selectedDifficulty === "all" || tutorial.difficulty === selectedDifficulty; + const matchesType = selectedType === "all" || tutorial.type === selectedType; + + return matchesSearch && matchesCategory && matchesDifficulty && matchesType; + }); + + return ( +
+ {/* Header */} +
+

+ Documentation Tutorials +

+

+ Step-by-step guides and interactive tutorials to help you master AeThex +

+ + {/* Filters */} +
+
+
+ + setSearchTerm(e.target.value)} + className="pl-10 bg-slate-800/50 border-slate-600 text-white" + /> +
+
+
+ + +
+
+
+ +
+ {/* Categories Sidebar */} +
+ + + + + Categories + + + + {categories.map((category) => { + const Icon = category.icon; + return ( + + ); + })} + + +
+ + {/* Tutorials Grid */} +
+
+

+ Showing {filteredTutorials.length} tutorials +

+
+ +
+ {filteredTutorials.map((tutorial) => { + const TypeIcon = getTypeIcon(tutorial.type); + return ( + + +
+
+
+ + + {tutorial.category} + + + {tutorial.difficulty} + + {tutorial.isNew && ( + + New + + )} +
+ +

+ {tutorial.title} +

+ +

+ {tutorial.description} +

+ +
+
+
+ + {tutorial.duration} +
+
+ + {tutorial.author} +
+
+ + {tutorial.rating} +
+
+ + {tutorial.views} +
+
+ + {tutorial.likes} +
+
+ + +
+
+
+ + + ); + })} +
+ + {filteredTutorials.length === 0 && ( + + + +

+ No tutorials found +

+

+ Try adjusting your search terms or filters to find what you're looking for. +

+ + + )} +
+
+
+ ); +}