AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prettier format pending files

Browse source
This commit is contained in:
Builder.io 2025-08-08 11:12:21 +00:00
parent 26b89be122
commit d669ee159a
5 changed files with 386 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
client/pages/DocsLayout.tsx
View file

@ -30,7 +30,7 @@ const navigation = [
}, },
{ {
name: "Tutorials", name: "Tutorials",
href: "/docs/tutorials", href: "/docs/tutorials",
icon: Video, icon: Video,
badge: "New", badge: "New",
}, },
@ -65,24 +65,27 @@ export default function DocsLayout() {
const getBreadcrumb = () => { const getBreadcrumb = () => {
const path = location.pathname; const path = location.pathname;
const segments = path.split('/').filter(Boolean); const segments = path.split("/").filter(Boolean);
if (segments.length <= 1) return []; if (segments.length <= 1) return [];
const breadcrumbs = []; const breadcrumbs = [];
let currentPath = ''; let currentPath = "";
segments.forEach((segment, index) => { segments.forEach((segment, index) => {
currentPath += `/${segment}`; currentPath += `/${segment}`;
if (index > 0) { // Skip the first 'docs' segment if (index > 0) {
// Skip the first 'docs' segment
breadcrumbs.push({ breadcrumbs.push({
name: segment.charAt(0).toUpperCase() + segment.slice(1).replace('-', ' '), name:
segment.charAt(0).toUpperCase() +
segment.slice(1).replace("-", " "),
href: currentPath, href: currentPath,
isLast: index === segments.length - 1 isLast: index === segments.length - 1,
}); });
} }
}); });
return breadcrumbs; return breadcrumbs;
}; };
@ -107,7 +110,11 @@ export default function DocsLayout() {
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
className="lg:hidden p-2 text-white bg-slate-800 rounded-md" className="lg:hidden p-2 text-white bg-slate-800 rounded-md"
> >
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />} {sidebarOpen ? (
<X className="h-5 w-5" />
) : (
<Menu className="h-5 w-5" />
)}
</button> </button>
</div> </div>
@ -123,7 +130,7 @@ export default function DocsLayout() {
{crumb.isLast ? ( {crumb.isLast ? (
<span className="text-white">{crumb.name}</span> <span className="text-white">{crumb.name}</span>
) : ( ) : (
<Link <Link
to={crumb.href} to={crumb.href}
className="hover:text-white transition-colors" className="hover:text-white transition-colors"
> >
@ -149,21 +156,23 @@ export default function DocsLayout() {
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
{/* Sidebar */} {/* Sidebar */}
<div className={`w-full lg:w-64 ${sidebarOpen ? 'block' : 'hidden lg:block'}`}> <div
className={`w-full lg:w-64 ${sidebarOpen ? "block" : "hidden lg:block"}`}
>
<div className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 sticky top-4"> <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 sticky top-4">
<nav className="space-y-2"> <nav className="space-y-2">
{navigation.map((item) => { {navigation.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const active = isActive(item.href, item.exact); const active = isActive(item.href, item.exact);
return ( return (
<Link <Link
key={item.name} key={item.name}
to={item.href} to={item.href}
className={`flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all ${ className={`flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all ${
active active
? 'bg-purple-600 text-white' ? "bg-purple-600 text-white"
: 'text-gray-300 hover:bg-slate-700/50 hover:text-white' : "text-gray-300 hover:bg-slate-700/50 hover:text-white"
}`} }`}
onClick={() => setSidebarOpen(false)} onClick={() => setSidebarOpen(false)}
> >

149
client/pages/Status.tsx
View file

@ -1,6 +1,12 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -20,7 +26,7 @@ import {
interface ServiceStatus { interface ServiceStatus {
name: string; name: string;
status: 'operational' | 'degraded' | 'outage'; status: "operational" | "degraded" | "outage";
responseTime: number; responseTime: number;
uptime: string; uptime: string;
lastCheck: string; lastCheck: string;
@ -31,7 +37,7 @@ interface SystemMetric {
name: string; name: string;
value: string; value: string;
unit: string; unit: string;
status: 'good' | 'warning' | 'critical'; status: "good" | "warning" | "critical";
icon: any; icon: any;
} }
@ -39,44 +45,44 @@ export default function Status() {
const [services, setServices] = useState<ServiceStatus[]>([ const [services, setServices] = useState<ServiceStatus[]>([
{ {
name: "AeThex Core API", name: "AeThex Core API",
status: 'operational', status: "operational",
responseTime: 145, responseTime: 145,
uptime: "99.98%", uptime: "99.98%",
lastCheck: "30 seconds ago", lastCheck: "30 seconds ago",
description: "Main application API and authentication services" description: "Main application API and authentication services",
}, },
{ {
name: "Database Services", name: "Database Services",
status: 'operational', status: "operational",
responseTime: 89, responseTime: 89,
uptime: "99.99%", uptime: "99.99%",
lastCheck: "1 minute ago", lastCheck: "1 minute ago",
description: "Supabase database and storage services" description: "Supabase database and storage services",
}, },
{ {
name: "CDN & Assets", name: "CDN & Assets",
status: 'operational', status: "operational",
responseTime: 67, responseTime: 67,
uptime: "99.95%", uptime: "99.95%",
lastCheck: "45 seconds ago", lastCheck: "45 seconds ago",
description: "Content delivery network and static assets" description: "Content delivery network and static assets",
}, },
{ {
name: "Authentication", name: "Authentication",
status: 'operational', status: "operational",
responseTime: 123, responseTime: 123,
uptime: "99.97%", uptime: "99.97%",
lastCheck: "2 minutes ago", lastCheck: "2 minutes ago",
description: "OAuth and email authentication systems" description: "OAuth and email authentication systems",
}, },
{ {
name: "Project Management", name: "Project Management",
status: 'degraded', status: "degraded",
responseTime: 245, responseTime: 245,
uptime: "98.84%", uptime: "98.84%",
lastCheck: "3 minutes ago", lastCheck: "3 minutes ago",
description: "Project creation and management features" description: "Project creation and management features",
} },
]); ]);
const [metrics, setMetrics] = useState<SystemMetric[]>([ const [metrics, setMetrics] = useState<SystemMetric[]>([
@ -84,30 +90,30 @@ export default function Status() {
name: "Global Uptime", name: "Global Uptime",
value: "99.96", value: "99.96",
unit: "%", unit: "%",
status: 'good', status: "good",
icon: Activity icon: Activity,
}, },
{ {
name: "Response Time", name: "Response Time",
value: "142", value: "142",
unit: "ms", unit: "ms",
status: 'good', status: "good",
icon: Zap icon: Zap,
}, },
{ {
name: "Active Users", name: "Active Users",
value: "1,247", value: "1,247",
unit: "", unit: "",
status: 'good', status: "good",
icon: Globe icon: Globe,
}, },
{ {
name: "Error Rate", name: "Error Rate",
value: "0.04", value: "0.04",
unit: "%", unit: "%",
status: 'good', status: "good",
icon: Shield icon: Shield,
} },
]); ]);
const [lastUpdated, setLastUpdated] = useState(new Date()); const [lastUpdated, setLastUpdated] = useState(new Date());
@ -115,11 +121,11 @@ export default function Status() {
const getStatusIcon = (status: string) => { const getStatusIcon = (status: string) => {
switch (status) { switch (status) {
case 'operational': case "operational":
return <CheckCircle className="h-5 w-5 text-green-500" />; return <CheckCircle className="h-5 w-5 text-green-500" />;
case 'degraded': case "degraded":
return <AlertTriangle className="h-5 w-5 text-yellow-500" />; return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
case 'outage': case "outage":
return <XCircle className="h-5 w-5 text-red-500" />; return <XCircle className="h-5 w-5 text-red-500" />;
default: default:
return <CheckCircle className="h-5 w-5 text-gray-400" />; return <CheckCircle className="h-5 w-5 text-gray-400" />;
@ -128,43 +134,43 @@ export default function Status() {
const getStatusColor = (status: string) => { const getStatusColor = (status: string) => {
switch (status) { switch (status) {
case 'operational': case "operational":
return 'bg-green-500'; return "bg-green-500";
case 'degraded': case "degraded":
return 'bg-yellow-500'; return "bg-yellow-500";
case 'outage': case "outage":
return 'bg-red-500'; return "bg-red-500";
default: default:
return 'bg-gray-400'; return "bg-gray-400";
} }
}; };
const getMetricColor = (status: string) => { const getMetricColor = (status: string) => {
switch (status) { switch (status) {
case 'good': case "good":
return 'text-green-400'; return "text-green-400";
case 'warning': case "warning":
return 'text-yellow-400'; return "text-yellow-400";
case 'critical': case "critical":
return 'text-red-400'; return "text-red-400";
default: default:
return 'text-gray-400'; return "text-gray-400";
} }
}; };
const getOverallStatus = () => { const getOverallStatus = () => {
const hasOutage = services.some(s => s.status === 'outage'); const hasOutage = services.some((s) => s.status === "outage");
const hasDegraded = services.some(s => s.status === 'degraded'); const hasDegraded = services.some((s) => s.status === "degraded");
if (hasOutage) return { status: 'outage', message: 'Service Disruption' }; if (hasOutage) return { status: "outage", message: "Service Disruption" };
if (hasDegraded) return { status: 'degraded', message: 'Partial Outage' }; if (hasDegraded) return { status: "degraded", message: "Partial Outage" };
return { status: 'operational', message: 'All Systems Operational' }; return { status: "operational", message: "All Systems Operational" };
}; };
const refreshStatus = async () => { const refreshStatus = async () => {
setIsRefreshing(true); setIsRefreshing(true);
// Simulate API call // Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
setLastUpdated(new Date()); setLastUpdated(new Date());
setIsRefreshing(false); setIsRefreshing(false);
}; };
@ -191,11 +197,13 @@ export default function Status() {
disabled={isRefreshing} disabled={isRefreshing}
className="bg-purple-600 hover:bg-purple-700" className="bg-purple-600 hover:bg-purple-700"
> >
<RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} /> <RefreshCw
className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`}
/>
Refresh Refresh
</Button> </Button>
</div> </div>
{/* Overall Status */} {/* Overall Status */}
<Card className="bg-slate-800/50 border-slate-700"> <Card className="bg-slate-800/50 border-slate-700">
<CardContent className="p-6"> <CardContent className="p-6">
@ -211,7 +219,7 @@ export default function Status() {
</p> </p>
</div> </div>
</div> </div>
<Badge <Badge
className={`${getStatusColor(overall.status)} text-white border-0 px-3 py-1`} className={`${getStatusColor(overall.status)} text-white border-0 px-3 py-1`}
> >
{overall.status.toUpperCase()} {overall.status.toUpperCase()}
@ -231,11 +239,16 @@ export default function Status() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm text-gray-400">{metric.name}</p> <p className="text-sm text-gray-400">{metric.name}</p>
<p className={`text-2xl font-bold ${getMetricColor(metric.status)}`}> <p
{metric.value}{metric.unit} className={`text-2xl font-bold ${getMetricColor(metric.status)}`}
>
{metric.value}
{metric.unit}
</p> </p>
</div> </div>
<Icon className={`h-8 w-8 ${getMetricColor(metric.status)}`} /> <Icon
className={`h-8 w-8 ${getMetricColor(metric.status)}`}
/>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -257,28 +270,36 @@ export default function Status() {
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{services.map((service, index) => ( {services.map((service, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg border border-slate-600" className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg border border-slate-600"
> >
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
{getStatusIcon(service.status)} {getStatusIcon(service.status)}
<div> <div>
<h4 className="text-white font-medium">{service.name}</h4> <h4 className="text-white font-medium">
<p className="text-sm text-gray-400">{service.description}</p> {service.name}
</h4>
<p className="text-sm text-gray-400">
{service.description}
</p>
</div> </div>
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div> <div>
<p className="text-sm text-gray-400">Response Time</p> <p className="text-sm text-gray-400">Response Time</p>
<p className="text-white font-medium">{service.responseTime}ms</p> <p className="text-white font-medium">
{service.responseTime}ms
</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-400">Uptime</p> <p className="text-sm text-gray-400">Uptime</p>
<p className="text-white font-medium">{service.uptime}</p> <p className="text-white font-medium">
{service.uptime}
</p>
</div> </div>
<Badge <Badge
className={`${getStatusColor(service.status)} text-white border-0`} className={`${getStatusColor(service.status)} text-white border-0`}
> >
{service.status} {service.status}
@ -311,14 +332,15 @@ export default function Status() {
Project Management Performance Restored Project Management Performance Restored
</p> </p>
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
Response times have returned to normal after brief degradation Response times have returned to normal after brief
degradation
</p> </p>
<p className="text-xs text-gray-500 mt-1"> <p className="text-xs text-gray-500 mt-1">
2 hours ago • Resolved 2 hours ago • Resolved
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-3 p-3 bg-slate-900/50 rounded-lg border border-slate-600"> <div className="flex items-start space-x-3 p-3 bg-slate-900/50 rounded-lg border border-slate-600">
<CheckCircle className="h-5 w-5 text-green-500 mt-0.5" /> <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
<div> <div>
@ -326,7 +348,8 @@ export default function Status() {
Scheduled Maintenance Completed Scheduled Maintenance Completed
</p> </p>
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
Database optimization and security updates applied successfully Database optimization and security updates applied
successfully
</p> </p>
<p className="text-xs text-gray-500 mt-1"> <p className="text-xs text-gray-500 mt-1">
1 day ago • Resolved 1 day ago • Resolved

151
client/pages/Tutorials.tsx
View file

@ -1,6 +1,12 @@
import { useState } from "react"; import { useState } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -31,7 +37,7 @@ interface Tutorial {
title: string; title: string;
description: string; description: string;
category: string; category: string;
difficulty: 'beginner' | 'intermediate' | 'advanced'; difficulty: "beginner" | "intermediate" | "advanced";
duration: string; duration: string;
author: string; author: string;
rating: number; rating: number;
@ -47,7 +53,8 @@ const tutorials: Tutorial[] = [
{ {
id: "1", id: "1",
title: "Getting Started with AeThex Platform", title: "Getting Started with AeThex Platform",
description: "Complete beginner's guide to navigating and using the AeThex development platform", description:
"Complete beginner's guide to navigating and using the AeThex development platform",
category: "Platform", category: "Platform",
difficulty: "beginner", difficulty: "beginner",
duration: "15 min", duration: "15 min",
@ -56,13 +63,15 @@ const tutorials: Tutorial[] = [
views: 2847, views: 2847,
likes: 234, likes: 234,
tags: ["getting-started", "platform", "basics"], tags: ["getting-started", "platform", "basics"],
thumbnail: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400", thumbnail:
isNew: true "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
isNew: true,
}, },
{ {
id: "2", id: "2",
title: "Building Your First Game with Unity & AeThex", title: "Building Your First Game with Unity & AeThex",
description: "Step-by-step tutorial for creating a 2D platformer game using Unity and AeThex tools", description:
"Step-by-step tutorial for creating a 2D platformer game using Unity and AeThex tools",
category: "Game Development", category: "Game Development",
difficulty: "beginner", difficulty: "beginner",
duration: "45 min", duration: "45 min",
@ -71,12 +80,14 @@ const tutorials: Tutorial[] = [
views: 1923, views: 1923,
likes: 187, likes: 187,
tags: ["unity", "2d", "platformer", "game-dev"], tags: ["unity", "2d", "platformer", "game-dev"],
thumbnail: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400" thumbnail:
"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400",
}, },
{ {
id: "3", id: "3",
title: "Advanced AI Integration Patterns", title: "Advanced AI Integration Patterns",
description: "Learn how to integrate advanced AI systems into your projects using AeThex AI tools", description:
"Learn how to integrate advanced AI systems into your projects using AeThex AI tools",
category: "AI/ML", category: "AI/ML",
difficulty: "advanced", difficulty: "advanced",
duration: "60 min", duration: "60 min",
@ -85,13 +96,15 @@ const tutorials: Tutorial[] = [
views: 856, views: 856,
likes: 98, likes: 98,
tags: ["ai", "machine-learning", "integration", "advanced"], tags: ["ai", "machine-learning", "integration", "advanced"],
thumbnail: "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400", thumbnail:
isPremium: true "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
isPremium: true,
}, },
{ {
id: "4", id: "4",
title: "Database Design Best Practices", title: "Database Design Best Practices",
description: "Master database architecture and optimization for high-performance applications", description:
"Master database architecture and optimization for high-performance applications",
category: "Backend", category: "Backend",
difficulty: "intermediate", difficulty: "intermediate",
duration: "35 min", duration: "35 min",
@ -100,12 +113,14 @@ const tutorials: Tutorial[] = [
views: 1456, views: 1456,
likes: 142, likes: 142,
tags: ["database", "sql", "optimization", "backend"], tags: ["database", "sql", "optimization", "backend"],
thumbnail: "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=400" thumbnail:
"https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=400",
}, },
{ {
id: "5", id: "5",
title: "UI/UX Design for Games", title: "UI/UX Design for Games",
description: "Create compelling user interfaces and experiences for modern games", description:
"Create compelling user interfaces and experiences for modern games",
category: "Design", category: "Design",
difficulty: "intermediate", difficulty: "intermediate",
duration: "40 min", duration: "40 min",
@ -114,12 +129,14 @@ const tutorials: Tutorial[] = [
views: 2134, views: 2134,
likes: 203, likes: 203,
tags: ["ui", "ux", "design", "games"], tags: ["ui", "ux", "design", "games"],
thumbnail: "https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400" thumbnail:
"https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400",
}, },
{ {
id: "6", id: "6",
title: "Performance Optimization Techniques", title: "Performance Optimization Techniques",
description: "Advanced strategies for optimizing application performance and reducing load times", description:
"Advanced strategies for optimizing application performance and reducing load times",
category: "Performance", category: "Performance",
difficulty: "advanced", difficulty: "advanced",
duration: "50 min", duration: "50 min",
@ -128,9 +145,10 @@ const tutorials: Tutorial[] = [
views: 987, views: 987,
likes: 124, likes: 124,
tags: ["performance", "optimization", "advanced"], tags: ["performance", "optimization", "advanced"],
thumbnail: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400", thumbnail:
isNew: true "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
} isNew: true,
},
]; ];
const categories = [ const categories = [
@ -151,30 +169,45 @@ export default function Tutorials() {
const getDifficultyColor = (difficulty: string) => { const getDifficultyColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
case 'beginner': return 'bg-green-500'; case "beginner":
case 'intermediate': return 'bg-yellow-500'; return "bg-green-500";
case 'advanced': return 'bg-red-500'; case "intermediate":
default: return 'bg-gray-500'; return "bg-yellow-500";
case "advanced":
return "bg-red-500";
default:
return "bg-gray-500";
} }
}; };
const getDifficultyTextColor = (difficulty: string) => { const getDifficultyTextColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
case 'beginner': return 'text-green-400'; case "beginner":
case 'intermediate': return 'text-yellow-400'; return "text-green-400";
case 'advanced': return 'text-red-400'; case "intermediate":
default: return 'text-gray-400'; return "text-yellow-400";
case "advanced":
return "text-red-400";
default:
return "text-gray-400";
} }
}; };
const filteredTutorials = tutorials.filter(tutorial => { const filteredTutorials = tutorials.filter((tutorial) => {
const matchesSearch = tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) || const matchesSearch =
tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) || tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
tutorial.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())); tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
const matchesCategory = selectedCategory === "all" || tutorial.tags.some((tag) =>
tutorial.category.toLowerCase().replace(/[\/\s]/g, '-') === selectedCategory; tag.toLowerCase().includes(searchTerm.toLowerCase()),
const matchesDifficulty = selectedDifficulty === "all" || tutorial.difficulty === selectedDifficulty; );
const matchesCategory =
selectedCategory === "all" ||
tutorial.category.toLowerCase().replace(/[\/\s]/g, "-") ===
selectedCategory;
const matchesDifficulty =
selectedDifficulty === "all" ||
tutorial.difficulty === selectedDifficulty;
return matchesSearch && matchesCategory && matchesDifficulty; return matchesSearch && matchesCategory && matchesDifficulty;
}); });
@ -188,9 +221,10 @@ export default function Tutorials() {
AeThex Tutorials AeThex Tutorials
</h1> </h1>
<p className="text-xl text-gray-300 mb-6"> <p className="text-xl text-gray-300 mb-6">
Master cutting-edge development skills with our comprehensive tutorial library Master cutting-edge development skills with our comprehensive
tutorial library
</p> </p>
{/* Search and Filters */} {/* Search and Filters */}
<div className="flex flex-col lg:flex-row gap-4 mb-6"> <div className="flex flex-col lg:flex-row gap-4 mb-6">
<div className="flex-1"> <div className="flex-1">
@ -247,13 +281,15 @@ export default function Tutorials() {
onClick={() => setSelectedCategory(category.id)} onClick={() => setSelectedCategory(category.id)}
className={`w-full flex items-center justify-between p-3 rounded-lg transition-all ${ className={`w-full flex items-center justify-between p-3 rounded-lg transition-all ${
selectedCategory === category.id selectedCategory === category.id
? 'bg-purple-600 text-white' ? "bg-purple-600 text-white"
: 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50' : "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
}`} }`}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<Icon className="h-4 w-4" /> <Icon className="h-4 w-4" />
<span className="text-sm font-medium">{category.name}</span> <span className="text-sm font-medium">
{category.name}
</span>
</div> </div>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{category.count} {category.count}
@ -275,7 +311,10 @@ export default function Tutorials() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{filteredTutorials.map((tutorial) => ( {filteredTutorials.map((tutorial) => (
<Card key={tutorial.id} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"> <Card
key={tutorial.id}
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
>
<div className="relative"> <div className="relative">
<img <img
src={tutorial.thumbnail} src={tutorial.thumbnail}
@ -283,7 +322,10 @@ export default function Tutorials() {
className="w-full h-48 object-cover rounded-t-lg" className="w-full h-48 object-cover rounded-t-lg"
/> />
<div className="absolute inset-0 bg-black/40 rounded-t-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute inset-0 bg-black/40 rounded-t-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<Button size="lg" className="bg-purple-600 hover:bg-purple-700"> <Button
size="lg"
className="bg-purple-600 hover:bg-purple-700"
>
<Play className="h-5 w-5 mr-2" /> <Play className="h-5 w-5 mr-2" />
Start Tutorial Start Tutorial
</Button> </Button>
@ -299,25 +341,27 @@ export default function Tutorials() {
</Badge> </Badge>
)} )}
</div> </div>
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{tutorial.category} {tutorial.category}
</Badge> </Badge>
<Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}> <Badge
className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
>
{tutorial.difficulty} {tutorial.difficulty}
</Badge> </Badge>
</div> </div>
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors"> <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
{tutorial.title} {tutorial.title}
</h3> </h3>
<p className="text-gray-400 text-sm mb-3 line-clamp-2"> <p className="text-gray-400 text-sm mb-3 line-clamp-2">
{tutorial.description} {tutorial.description}
</p> </p>
<div className="flex items-center justify-between text-xs text-gray-500 mb-3"> <div className="flex items-center justify-between text-xs text-gray-500 mb-3">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="flex items-center"> <div className="flex items-center">
@ -330,7 +374,7 @@ export default function Tutorials() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3 text-xs text-gray-500"> <div className="flex items-center space-x-3 text-xs text-gray-500">
<div className="flex items-center"> <div className="flex items-center">
@ -348,10 +392,14 @@ export default function Tutorials() {
</div> </div>
<ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-colors" /> <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-colors" />
</div> </div>
<div className="flex flex-wrap gap-1 mt-3"> <div className="flex flex-wrap gap-1 mt-3">
{tutorial.tags.slice(0, 3).map((tag) => ( {tutorial.tags.slice(0, 3).map((tag) => (
<Badge key={tag} variant="outline" className="text-xs"> <Badge
key={tag}
variant="outline"
className="text-xs"
>
{tag} {tag}
</Badge> </Badge>
))} ))}
@ -369,7 +417,8 @@ export default function Tutorials() {
No tutorials found No tutorials found
</h3> </h3>
<p className="text-gray-400"> <p className="text-gray-400">
Try adjusting your search terms or filters to find what you're looking for. Try adjusting your search terms or filters to find what
you're looking for.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>

119
client/pages/docs/DocsOverview.tsx
View file

@ -1,4 +1,10 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -26,16 +32,17 @@ const quickStartCards = [
icon: Rocket, icon: Rocket,
href: "/docs/getting-started", href: "/docs/getting-started",
duration: "5 min read", duration: "5 min read",
difficulty: "Beginner" difficulty: "Beginner",
}, },
{ {
title: "First Tutorial", title: "First Tutorial",
description: "Follow your first interactive tutorial to build something amazing", description:
"Follow your first interactive tutorial to build something amazing",
icon: Play, icon: Play,
href: "/docs/tutorials", href: "/docs/tutorials",
duration: "15 min", duration: "15 min",
difficulty: "Beginner", difficulty: "Beginner",
isNew: true isNew: true,
}, },
{ {
title: "API Integration", title: "API Integration",
@ -43,7 +50,7 @@ const quickStartCards = [
icon: Code, icon: Code,
href: "/docs/api", href: "/docs/api",
duration: "10 min read", duration: "10 min read",
difficulty: "Intermediate" difficulty: "Intermediate",
}, },
{ {
title: "CLI Tools", title: "CLI Tools",
@ -51,8 +58,8 @@ const quickStartCards = [
icon: Terminal, icon: Terminal,
href: "/docs/cli", href: "/docs/cli",
duration: "8 min read", duration: "8 min read",
difficulty: "Intermediate" difficulty: "Intermediate",
} },
]; ];
const resourceSections = [ const resourceSections = [
@ -61,8 +68,13 @@ const resourceSections = [
description: "Step-by-step tutorials and comprehensive guides", description: "Step-by-step tutorials and comprehensive guides",
icon: Video, icon: Video,
href: "/docs/tutorials", href: "/docs/tutorials",
items: ["Platform Quick Start", "Game Development", "AI Integration", "Performance Optimization"], items: [
badge: "6 tutorials" "Platform Quick Start",
"Game Development",
"AI Integration",
"Performance Optimization",
],
badge: "6 tutorials",
}, },
{ {
title: "API Reference", title: "API Reference",
@ -70,16 +82,21 @@ const resourceSections = [
icon: Code, icon: Code,
href: "/docs/api", href: "/docs/api",
items: ["Authentication", "Project Management", "User APIs", "Webhooks"], items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
badge: "40+ endpoints" badge: "40+ endpoints",
}, },
{ {
title: "Examples", title: "Examples",
description: "Ready-to-use code examples and templates", description: "Ready-to-use code examples and templates",
icon: FileText, icon: FileText,
href: "/docs/examples", href: "/docs/examples",
items: ["React Components", "Game Templates", "API Integration", "Deployment Scripts"], items: [
badge: "25+ examples" "React Components",
} "Game Templates",
"API Integration",
"Deployment Scripts",
],
badge: "25+ examples",
},
]; ];
const featuredUpdates = [ const featuredUpdates = [
@ -88,20 +105,20 @@ const featuredUpdates = [
description: "Learn how to integrate cutting-edge AI features", description: "Learn how to integrate cutting-edge AI features",
date: "2 days ago", date: "2 days ago",
type: "Tutorial", type: "Tutorial",
isNew: true isNew: true,
}, },
{ {
title: "API v2.1 Documentation", title: "API v2.1 Documentation",
description: "Updated API docs with new endpoints and features", description: "Updated API docs with new endpoints and features",
date: "1 week ago", date: "1 week ago",
type: "API" type: "API",
}, },
{ {
title: "Performance Best Practices", title: "Performance Best Practices",
description: "New guide on optimizing application performance", description: "New guide on optimizing application performance",
date: "2 weeks ago", date: "2 weeks ago",
type: "Guide" type: "Guide",
} },
]; ];
export default function DocsOverview() { export default function DocsOverview() {
@ -113,18 +130,28 @@ export default function DocsOverview() {
Welcome to AeThex Documentation Welcome to AeThex Documentation
</h2> </h2>
<p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
Everything you need to build, deploy, and scale amazing projects with AeThex. Everything you need to build, deploy, and scale amazing projects with
Get started with our guides, explore our APIs, and learn from comprehensive tutorials. AeThex. Get started with our guides, explore our APIs, and learn from
comprehensive tutorials.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg" className="bg-purple-600 hover:bg-purple-700"> <Button
asChild
size="lg"
className="bg-purple-600 hover:bg-purple-700"
>
<Link to="/docs/getting-started"> <Link to="/docs/getting-started">
<Rocket className="h-5 w-5 mr-2" /> <Rocket className="h-5 w-5 mr-2" />
Get Started Get Started
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-slate-600 text-white hover:bg-slate-800"> <Button
asChild
variant="outline"
size="lg"
className="border-slate-600 text-white hover:bg-slate-800"
>
<Link to="/docs/tutorials"> <Link to="/docs/tutorials">
<Play className="h-5 w-5 mr-2" /> <Play className="h-5 w-5 mr-2" />
Watch Tutorials Watch Tutorials
@ -140,7 +167,10 @@ export default function DocsOverview() {
{quickStartCards.map((card, index) => { {quickStartCards.map((card, index) => {
const Icon = card.icon; const Icon = card.icon;
return ( return (
<Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"> <Card
key={index}
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
>
<Link to={card.href}> <Link to={card.href}>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@ -175,19 +205,22 @@ export default function DocsOverview() {
{/* Resource Sections */} {/* Resource Sections */}
<div className="mb-12"> <div className="mb-12">
<h3 className="text-2xl font-bold text-white mb-6">Documentation Sections</h3> <h3 className="text-2xl font-bold text-white mb-6">
Documentation Sections
</h3>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{resourceSections.map((section, index) => { {resourceSections.map((section, index) => {
const Icon = section.icon; const Icon = section.icon;
return ( return (
<Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"> <Card
key={index}
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
>
<Link to={section.href}> <Link to={section.href}>
<CardHeader> <CardHeader>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Icon className="h-8 w-8 text-purple-400" /> <Icon className="h-8 w-8 text-purple-400" />
<Badge variant="outline"> <Badge variant="outline">{section.badge}</Badge>
{section.badge}
</Badge>
</div> </div>
<CardTitle className="text-white group-hover:text-purple-400 transition-colors"> <CardTitle className="text-white group-hover:text-purple-400 transition-colors">
{section.title} {section.title}
@ -199,7 +232,10 @@ export default function DocsOverview() {
<CardContent> <CardContent>
<ul className="space-y-2 mb-4"> <ul className="space-y-2 mb-4">
{section.items.map((item, itemIndex) => ( {section.items.map((item, itemIndex) => (
<li key={itemIndex} className="text-sm text-gray-400 flex items-center"> <li
key={itemIndex}
className="text-sm text-gray-400 flex items-center"
>
<ArrowRight className="h-3 w-3 mr-2 text-purple-400" /> <ArrowRight className="h-3 w-3 mr-2 text-purple-400" />
{item} {item}
</li> </li>
@ -221,13 +257,20 @@ export default function DocsOverview() {
<div className="mb-12"> <div className="mb-12">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h3 className="text-2xl font-bold text-white">Recent Updates</h3> <h3 className="text-2xl font-bold text-white">Recent Updates</h3>
<Button variant="outline" size="sm" className="border-slate-600 text-white hover:bg-slate-800"> <Button
variant="outline"
size="sm"
className="border-slate-600 text-white hover:bg-slate-800"
>
View All Updates View All Updates
</Button> </Button>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
{featuredUpdates.map((update, index) => ( {featuredUpdates.map((update, index) => (
<Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"> <Card
key={index}
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
>
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
@ -242,7 +285,9 @@ export default function DocsOverview() {
{update.type} {update.type}
</Badge> </Badge>
</div> </div>
<p className="text-gray-400 text-sm">{update.description}</p> <p className="text-gray-400 text-sm">
{update.description}
</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="text-xs text-gray-500">{update.date}</p> <p className="text-xs text-gray-500">{update.date}</p>
@ -267,7 +312,10 @@ export default function DocsOverview() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button variant="outline" className="border-slate-600 text-white hover:bg-slate-800"> <Button
variant="outline"
className="border-slate-600 text-white hover:bg-slate-800"
>
<ExternalLink className="h-4 w-4 mr-2" /> <ExternalLink className="h-4 w-4 mr-2" />
View on GitHub View on GitHub
</Button> </Button>
@ -285,7 +333,10 @@ export default function DocsOverview() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button variant="outline" className="border-slate-600 text-white hover:bg-slate-800"> <Button
variant="outline"
className="border-slate-600 text-white hover:bg-slate-800"
>
<ExternalLink className="h-4 w-4 mr-2" /> <ExternalLink className="h-4 w-4 mr-2" />
Join Community Join Community
</Button> </Button>

139
client/pages/docs/DocsTutorials.tsx
View file

@ -1,5 +1,11 @@
import { useState } from "react"; import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -27,7 +33,7 @@ interface DocsTutorial {
title: string; title: string;
description: string; description: string;
category: string; category: string;
difficulty: 'beginner' | 'intermediate' | 'advanced'; difficulty: "beginner" | "intermediate" | "advanced";
duration: string; duration: string;
author: string; author: string;
rating: number; rating: number;
@ -35,7 +41,7 @@ interface DocsTutorial {
likes: number; likes: number;
tags: string[]; tags: string[];
isNew?: boolean; isNew?: boolean;
type: 'video' | 'article' | 'interactive'; type: "video" | "article" | "interactive";
path: string; path: string;
} }
@ -43,7 +49,8 @@ const docsTutorials: DocsTutorial[] = [
{ {
id: "1", id: "1",
title: "AeThex Platform Quick Start", 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.", description:
"Get up and running with AeThex in under 10 minutes. Learn the basics of project creation, navigation, and core features.",
category: "Getting Started", category: "Getting Started",
difficulty: "beginner", difficulty: "beginner",
duration: "8 min", duration: "8 min",
@ -54,12 +61,13 @@ const docsTutorials: DocsTutorial[] = [
tags: ["platform", "basics", "quickstart"], tags: ["platform", "basics", "quickstart"],
isNew: true, isNew: true,
type: "video", type: "video",
path: "/docs/tutorials/quickstart" path: "/docs/tutorials/quickstart",
}, },
{ {
id: "2", id: "2",
title: "Project Setup and Configuration", title: "Project Setup and Configuration",
description: "Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.", description:
"Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.",
category: "Setup", category: "Setup",
difficulty: "beginner", difficulty: "beginner",
duration: "15 min", duration: "15 min",
@ -69,12 +77,13 @@ const docsTutorials: DocsTutorial[] = [
likes: 287, likes: 287,
tags: ["setup", "configuration", "projects"], tags: ["setup", "configuration", "projects"],
type: "article", type: "article",
path: "/docs/tutorials/project-setup" path: "/docs/tutorials/project-setup",
}, },
{ {
id: "3", id: "3",
title: "Working with the AeThex API", title: "Working with the AeThex API",
description: "Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.", description:
"Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.",
category: "API Integration", category: "API Integration",
difficulty: "intermediate", difficulty: "intermediate",
duration: "25 min", duration: "25 min",
@ -84,12 +93,13 @@ const docsTutorials: DocsTutorial[] = [
likes: 198, likes: 198,
tags: ["api", "integration", "authentication"], tags: ["api", "integration", "authentication"],
type: "interactive", type: "interactive",
path: "/docs/tutorials/api-integration" path: "/docs/tutorials/api-integration",
}, },
{ {
id: "4", id: "4",
title: "Building Games with AeThex Tools", title: "Building Games with AeThex Tools",
description: "Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.", description:
"Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.",
category: "Game Development", category: "Game Development",
difficulty: "intermediate", difficulty: "intermediate",
duration: "45 min", duration: "45 min",
@ -99,12 +109,13 @@ const docsTutorials: DocsTutorial[] = [
likes: 523, likes: 523,
tags: ["games", "development", "tools"], tags: ["games", "development", "tools"],
type: "video", type: "video",
path: "/docs/tutorials/game-development" path: "/docs/tutorials/game-development",
}, },
{ {
id: "5", id: "5",
title: "Advanced Database Patterns", title: "Advanced Database Patterns",
description: "Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.", description:
"Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.",
category: "Database", category: "Database",
difficulty: "advanced", difficulty: "advanced",
duration: "35 min", duration: "35 min",
@ -114,12 +125,13 @@ const docsTutorials: DocsTutorial[] = [
likes: 165, likes: 165,
tags: ["database", "optimization", "patterns"], tags: ["database", "optimization", "patterns"],
type: "article", type: "article",
path: "/docs/tutorials/database-patterns" path: "/docs/tutorials/database-patterns",
}, },
{ {
id: "6", id: "6",
title: "AI Integration Workshop", title: "AI Integration Workshop",
description: "Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.", description:
"Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.",
category: "AI/ML", category: "AI/ML",
difficulty: "advanced", difficulty: "advanced",
duration: "60 min", duration: "60 min",
@ -130,8 +142,8 @@ const docsTutorials: DocsTutorial[] = [
tags: ["ai", "machine-learning", "integration"], tags: ["ai", "machine-learning", "integration"],
isNew: true, isNew: true,
type: "interactive", type: "interactive",
path: "/docs/tutorials/ai-integration" path: "/docs/tutorials/ai-integration",
} },
]; ];
const categories = [ const categories = [
@ -152,40 +164,60 @@ export default function DocsTutorials() {
const getDifficultyColor = (difficulty: string) => { const getDifficultyColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
case 'beginner': return 'bg-green-500'; case "beginner":
case 'intermediate': return 'bg-yellow-500'; return "bg-green-500";
case 'advanced': return 'bg-red-500'; case "intermediate":
default: return 'bg-gray-500'; return "bg-yellow-500";
case "advanced":
return "bg-red-500";
default:
return "bg-gray-500";
} }
}; };
const getTypeIcon = (type: string) => { const getTypeIcon = (type: string) => {
switch (type) { switch (type) {
case 'video': return Play; case "video":
case 'article': return BookOpen; return Play;
case 'interactive': return Code; case "article":
default: return BookOpen; return BookOpen;
case "interactive":
return Code;
default:
return BookOpen;
} }
}; };
const getTypeColor = (type: string) => { const getTypeColor = (type: string) => {
switch (type) { switch (type) {
case 'video': return 'text-red-400'; case "video":
case 'article': return 'text-blue-400'; return "text-red-400";
case 'interactive': return 'text-green-400'; case "article":
default: return 'text-gray-400'; return "text-blue-400";
case "interactive":
return "text-green-400";
default:
return "text-gray-400";
} }
}; };
const filteredTutorials = docsTutorials.filter(tutorial => { const filteredTutorials = docsTutorials.filter((tutorial) => {
const matchesSearch = tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) || const matchesSearch =
tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) || tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
tutorial.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())); tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
const matchesCategory = selectedCategory === "all" || tutorial.tags.some((tag) =>
tutorial.category.toLowerCase().replace(/[\/\s]/g, '-') === selectedCategory; tag.toLowerCase().includes(searchTerm.toLowerCase()),
const matchesDifficulty = selectedDifficulty === "all" || tutorial.difficulty === selectedDifficulty; );
const matchesType = selectedType === "all" || tutorial.type === selectedType; 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 matchesSearch && matchesCategory && matchesDifficulty && matchesType;
}); });
@ -197,9 +229,10 @@ export default function DocsTutorials() {
Documentation Tutorials Documentation Tutorials
</h2> </h2>
<p className="text-gray-300 mb-6"> <p className="text-gray-300 mb-6">
Step-by-step guides and interactive tutorials to help you master AeThex Step-by-step guides and interactive tutorials to help you master
AeThex
</p> </p>
{/* Filters */} {/* Filters */}
<div className="flex flex-col lg:flex-row gap-4 mb-6"> <div className="flex flex-col lg:flex-row gap-4 mb-6">
<div className="flex-1"> <div className="flex-1">
@ -257,8 +290,8 @@ export default function DocsTutorials() {
onClick={() => setSelectedCategory(category.id)} onClick={() => setSelectedCategory(category.id)}
className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-all ${ className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-all ${
selectedCategory === category.id selectedCategory === category.id
? 'bg-purple-600 text-white' ? "bg-purple-600 text-white"
: 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50' : "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
}`} }`}
> >
<Icon className="h-4 w-4" /> <Icon className="h-4 w-4" />
@ -282,16 +315,23 @@ export default function DocsTutorials() {
{filteredTutorials.map((tutorial) => { {filteredTutorials.map((tutorial) => {
const TypeIcon = getTypeIcon(tutorial.type); const TypeIcon = getTypeIcon(tutorial.type);
return ( return (
<Card key={tutorial.id} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"> <Card
key={tutorial.id}
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center space-x-3 mb-3"> <div className="flex items-center space-x-3 mb-3">
<TypeIcon className={`h-5 w-5 ${getTypeColor(tutorial.type)}`} /> <TypeIcon
className={`h-5 w-5 ${getTypeColor(tutorial.type)}`}
/>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{tutorial.category} {tutorial.category}
</Badge> </Badge>
<Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}> <Badge
className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
>
{tutorial.difficulty} {tutorial.difficulty}
</Badge> </Badge>
{tutorial.isNew && ( {tutorial.isNew && (
@ -300,15 +340,15 @@ export default function DocsTutorials() {
</Badge> </Badge>
)} )}
</div> </div>
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors"> <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
{tutorial.title} {tutorial.title}
</h3> </h3>
<p className="text-gray-400 mb-4"> <p className="text-gray-400 mb-4">
{tutorial.description} {tutorial.description}
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-4 text-sm text-gray-500"> <div className="flex items-center space-x-4 text-sm text-gray-500">
<div className="flex items-center"> <div className="flex items-center">
@ -332,7 +372,7 @@ export default function DocsTutorials() {
{tutorial.likes} {tutorial.likes}
</div> </div>
</div> </div>
<Button className="bg-purple-600 hover:bg-purple-700"> <Button className="bg-purple-600 hover:bg-purple-700">
Start Tutorial Start Tutorial
<ChevronRight className="h-4 w-4 ml-2" /> <ChevronRight className="h-4 w-4 ml-2" />
@ -354,7 +394,8 @@ export default function DocsTutorials() {
No tutorials found No tutorials found
</h3> </h3>
<p className="text-gray-400"> <p className="text-gray-400">
Try adjusting your search terms or filters to find what you're looking for. Try adjusting your search terms or filters to find what you're
looking for.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>