Prettier format pending files
This commit is contained in:
Builder.io
parent
26b89be122
commit
d669ee159a
5 changed files with 386 additions and 213 deletions
|
|
@ -30,7 +30,7 @@ const navigation = [
|
|||
},
|
||||
{
|
||||
name: "Tutorials",
|
||||
href: "/docs/tutorials",
|
||||
href: "/docs/tutorials",
|
||||
icon: Video,
|
||||
badge: "New",
|
||||
},
|
||||
|
|
@ -65,24 +65,27 @@ export default function DocsLayout() {
|
|||
|
||||
const getBreadcrumb = () => {
|
||||
const path = location.pathname;
|
||||
const segments = path.split('/').filter(Boolean);
|
||||
|
||||
const segments = path.split("/").filter(Boolean);
|
||||
|
||||
if (segments.length <= 1) return [];
|
||||
|
||||
|
||||
const breadcrumbs = [];
|
||||
let currentPath = '';
|
||||
|
||||
let currentPath = "";
|
||||
|
||||
segments.forEach((segment, index) => {
|
||||
currentPath += `/${segment}`;
|
||||
if (index > 0) { // Skip the first 'docs' segment
|
||||
if (index > 0) {
|
||||
// Skip the first 'docs' segment
|
||||
breadcrumbs.push({
|
||||
name: segment.charAt(0).toUpperCase() + segment.slice(1).replace('-', ' '),
|
||||
name:
|
||||
segment.charAt(0).toUpperCase() +
|
||||
segment.slice(1).replace("-", " "),
|
||||
href: currentPath,
|
||||
isLast: index === segments.length - 1
|
||||
isLast: index === segments.length - 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
|
|
@ -107,7 +110,11 @@ export default function DocsLayout() {
|
|||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
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>
|
||||
</div>
|
||||
|
||||
|
|
@ -123,7 +130,7 @@ export default function DocsLayout() {
|
|||
{crumb.isLast ? (
|
||||
<span className="text-white">{crumb.name}</span>
|
||||
) : (
|
||||
<Link
|
||||
<Link
|
||||
to={crumb.href}
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
|
|
@ -149,21 +156,23 @@ export default function DocsLayout() {
|
|||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* 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">
|
||||
<nav className="space-y-2">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.href, item.exact);
|
||||
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all ${
|
||||
active
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'text-gray-300 hover:bg-slate-700/50 hover:text-white'
|
||||
? "bg-purple-600 text-white"
|
||||
: "text-gray-300 hover:bg-slate-700/50 hover:text-white"
|
||||
}`}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import { useState, useEffect } from "react";
|
||||
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 { Button } from "@/components/ui/button";
|
||||
import {
|
||||
|
|
@ -20,7 +26,7 @@ import {
|
|||
|
||||
interface ServiceStatus {
|
||||
name: string;
|
||||
status: 'operational' | 'degraded' | 'outage';
|
||||
status: "operational" | "degraded" | "outage";
|
||||
responseTime: number;
|
||||
uptime: string;
|
||||
lastCheck: string;
|
||||
|
|
@ -31,7 +37,7 @@ interface SystemMetric {
|
|||
name: string;
|
||||
value: string;
|
||||
unit: string;
|
||||
status: 'good' | 'warning' | 'critical';
|
||||
status: "good" | "warning" | "critical";
|
||||
icon: any;
|
||||
}
|
||||
|
||||
|
|
@ -39,44 +45,44 @@ export default function Status() {
|
|||
const [services, setServices] = useState<ServiceStatus[]>([
|
||||
{
|
||||
name: "AeThex Core API",
|
||||
status: 'operational',
|
||||
status: "operational",
|
||||
responseTime: 145,
|
||||
uptime: "99.98%",
|
||||
lastCheck: "30 seconds ago",
|
||||
description: "Main application API and authentication services"
|
||||
description: "Main application API and authentication services",
|
||||
},
|
||||
{
|
||||
name: "Database Services",
|
||||
status: 'operational',
|
||||
status: "operational",
|
||||
responseTime: 89,
|
||||
uptime: "99.99%",
|
||||
lastCheck: "1 minute ago",
|
||||
description: "Supabase database and storage services"
|
||||
description: "Supabase database and storage services",
|
||||
},
|
||||
{
|
||||
name: "CDN & Assets",
|
||||
status: 'operational',
|
||||
status: "operational",
|
||||
responseTime: 67,
|
||||
uptime: "99.95%",
|
||||
lastCheck: "45 seconds ago",
|
||||
description: "Content delivery network and static assets"
|
||||
description: "Content delivery network and static assets",
|
||||
},
|
||||
{
|
||||
name: "Authentication",
|
||||
status: 'operational',
|
||||
status: "operational",
|
||||
responseTime: 123,
|
||||
uptime: "99.97%",
|
||||
lastCheck: "2 minutes ago",
|
||||
description: "OAuth and email authentication systems"
|
||||
description: "OAuth and email authentication systems",
|
||||
},
|
||||
{
|
||||
name: "Project Management",
|
||||
status: 'degraded',
|
||||
status: "degraded",
|
||||
responseTime: 245,
|
||||
uptime: "98.84%",
|
||||
lastCheck: "3 minutes ago",
|
||||
description: "Project creation and management features"
|
||||
}
|
||||
description: "Project creation and management features",
|
||||
},
|
||||
]);
|
||||
|
||||
const [metrics, setMetrics] = useState<SystemMetric[]>([
|
||||
|
|
@ -84,30 +90,30 @@ export default function Status() {
|
|||
name: "Global Uptime",
|
||||
value: "99.96",
|
||||
unit: "%",
|
||||
status: 'good',
|
||||
icon: Activity
|
||||
status: "good",
|
||||
icon: Activity,
|
||||
},
|
||||
{
|
||||
name: "Response Time",
|
||||
value: "142",
|
||||
unit: "ms",
|
||||
status: 'good',
|
||||
icon: Zap
|
||||
status: "good",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
name: "Active Users",
|
||||
value: "1,247",
|
||||
unit: "",
|
||||
status: 'good',
|
||||
icon: Globe
|
||||
status: "good",
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
name: "Error Rate",
|
||||
value: "0.04",
|
||||
unit: "%",
|
||||
status: 'good',
|
||||
icon: Shield
|
||||
}
|
||||
status: "good",
|
||||
icon: Shield,
|
||||
},
|
||||
]);
|
||||
|
||||
const [lastUpdated, setLastUpdated] = useState(new Date());
|
||||
|
|
@ -115,11 +121,11 @@ export default function Status() {
|
|||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
case "operational":
|
||||
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
||||
case 'degraded':
|
||||
case "degraded":
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
|
||||
case 'outage':
|
||||
case "outage":
|
||||
return <XCircle className="h-5 w-5 text-red-500" />;
|
||||
default:
|
||||
return <CheckCircle className="h-5 w-5 text-gray-400" />;
|
||||
|
|
@ -128,43 +134,43 @@ export default function Status() {
|
|||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'bg-green-500';
|
||||
case 'degraded':
|
||||
return 'bg-yellow-500';
|
||||
case 'outage':
|
||||
return 'bg-red-500';
|
||||
case "operational":
|
||||
return "bg-green-500";
|
||||
case "degraded":
|
||||
return "bg-yellow-500";
|
||||
case "outage":
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return 'bg-gray-400';
|
||||
return "bg-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const getMetricColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'good':
|
||||
return 'text-green-400';
|
||||
case 'warning':
|
||||
return 'text-yellow-400';
|
||||
case 'critical':
|
||||
return 'text-red-400';
|
||||
case "good":
|
||||
return "text-green-400";
|
||||
case "warning":
|
||||
return "text-yellow-400";
|
||||
case "critical":
|
||||
return "text-red-400";
|
||||
default:
|
||||
return 'text-gray-400';
|
||||
return "text-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const getOverallStatus = () => {
|
||||
const hasOutage = services.some(s => s.status === 'outage');
|
||||
const hasDegraded = services.some(s => s.status === 'degraded');
|
||||
|
||||
if (hasOutage) return { status: 'outage', message: 'Service Disruption' };
|
||||
if (hasDegraded) return { status: 'degraded', message: 'Partial Outage' };
|
||||
return { status: 'operational', message: 'All Systems Operational' };
|
||||
const hasOutage = services.some((s) => s.status === "outage");
|
||||
const hasDegraded = services.some((s) => s.status === "degraded");
|
||||
|
||||
if (hasOutage) return { status: "outage", message: "Service Disruption" };
|
||||
if (hasDegraded) return { status: "degraded", message: "Partial Outage" };
|
||||
return { status: "operational", message: "All Systems Operational" };
|
||||
};
|
||||
|
||||
const refreshStatus = async () => {
|
||||
setIsRefreshing(true);
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
setLastUpdated(new Date());
|
||||
setIsRefreshing(false);
|
||||
};
|
||||
|
|
@ -191,11 +197,13 @@ export default function Status() {
|
|||
disabled={isRefreshing}
|
||||
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
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Overall Status */}
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
|
|
@ -211,7 +219,7 @@ export default function Status() {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
<Badge
|
||||
className={`${getStatusColor(overall.status)} text-white border-0 px-3 py-1`}
|
||||
>
|
||||
{overall.status.toUpperCase()}
|
||||
|
|
@ -231,11 +239,16 @@ export default function Status() {
|
|||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">{metric.name}</p>
|
||||
<p className={`text-2xl font-bold ${getMetricColor(metric.status)}`}>
|
||||
{metric.value}{metric.unit}
|
||||
<p
|
||||
className={`text-2xl font-bold ${getMetricColor(metric.status)}`}
|
||||
>
|
||||
{metric.value}
|
||||
{metric.unit}
|
||||
</p>
|
||||
</div>
|
||||
<Icon className={`h-8 w-8 ${getMetricColor(metric.status)}`} />
|
||||
<Icon
|
||||
className={`h-8 w-8 ${getMetricColor(metric.status)}`}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -257,28 +270,36 @@ export default function Status() {
|
|||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
<div
|
||||
key={index}
|
||||
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">
|
||||
{getStatusIcon(service.status)}
|
||||
<div>
|
||||
<h4 className="text-white font-medium">{service.name}</h4>
|
||||
<p className="text-sm text-gray-400">{service.description}</p>
|
||||
<h4 className="text-white font-medium">
|
||||
{service.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-400">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<Badge
|
||||
<Badge
|
||||
className={`${getStatusColor(service.status)} text-white border-0`}
|
||||
>
|
||||
{service.status}
|
||||
|
|
@ -311,14 +332,15 @@ export default function Status() {
|
|||
Project Management Performance Restored
|
||||
</p>
|
||||
<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 className="text-xs text-gray-500 mt-1">
|
||||
2 hours ago • Resolved
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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" />
|
||||
<div>
|
||||
|
|
@ -326,7 +348,8 @@ export default function Status() {
|
|||
Scheduled Maintenance Completed
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Database optimization and security updates applied successfully
|
||||
Database optimization and security updates applied
|
||||
successfully
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
1 day ago • Resolved
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import { useState } from "react";
|
||||
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 { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
|
@ -31,7 +37,7 @@ interface Tutorial {
|
|||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
difficulty: 'beginner' | 'intermediate' | 'advanced';
|
||||
difficulty: "beginner" | "intermediate" | "advanced";
|
||||
duration: string;
|
||||
author: string;
|
||||
rating: number;
|
||||
|
|
@ -47,7 +53,8 @@ const tutorials: Tutorial[] = [
|
|||
{
|
||||
id: "1",
|
||||
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",
|
||||
difficulty: "beginner",
|
||||
duration: "15 min",
|
||||
|
|
@ -56,13 +63,15 @@ const tutorials: Tutorial[] = [
|
|||
views: 2847,
|
||||
likes: 234,
|
||||
tags: ["getting-started", "platform", "basics"],
|
||||
thumbnail: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
|
||||
isNew: true
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
id: "2",
|
||||
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",
|
||||
difficulty: "beginner",
|
||||
duration: "45 min",
|
||||
|
|
@ -71,12 +80,14 @@ const tutorials: Tutorial[] = [
|
|||
views: 1923,
|
||||
likes: 187,
|
||||
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",
|
||||
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",
|
||||
difficulty: "advanced",
|
||||
duration: "60 min",
|
||||
|
|
@ -85,13 +96,15 @@ const tutorials: Tutorial[] = [
|
|||
views: 856,
|
||||
likes: 98,
|
||||
tags: ["ai", "machine-learning", "integration", "advanced"],
|
||||
thumbnail: "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
|
||||
isPremium: true
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
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",
|
||||
difficulty: "intermediate",
|
||||
duration: "35 min",
|
||||
|
|
@ -100,12 +113,14 @@ const tutorials: Tutorial[] = [
|
|||
views: 1456,
|
||||
likes: 142,
|
||||
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",
|
||||
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",
|
||||
difficulty: "intermediate",
|
||||
duration: "40 min",
|
||||
|
|
@ -114,12 +129,14 @@ const tutorials: Tutorial[] = [
|
|||
views: 2134,
|
||||
likes: 203,
|
||||
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",
|
||||
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",
|
||||
difficulty: "advanced",
|
||||
duration: "50 min",
|
||||
|
|
@ -128,9 +145,10 @@ const tutorials: Tutorial[] = [
|
|||
views: 987,
|
||||
likes: 124,
|
||||
tags: ["performance", "optimization", "advanced"],
|
||||
thumbnail: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
|
||||
isNew: true
|
||||
}
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
|
||||
isNew: true,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
|
|
@ -151,30 +169,45 @@ export default function Tutorials() {
|
|||
|
||||
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';
|
||||
case "beginner":
|
||||
return "bg-green-500";
|
||||
case "intermediate":
|
||||
return "bg-yellow-500";
|
||||
case "advanced":
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return "bg-gray-500";
|
||||
}
|
||||
};
|
||||
|
||||
const getDifficultyTextColor = (difficulty: string) => {
|
||||
switch (difficulty) {
|
||||
case 'beginner': return 'text-green-400';
|
||||
case 'intermediate': return 'text-yellow-400';
|
||||
case 'advanced': return 'text-red-400';
|
||||
default: return 'text-gray-400';
|
||||
case "beginner":
|
||||
return "text-green-400";
|
||||
case "intermediate":
|
||||
return "text-yellow-400";
|
||||
case "advanced":
|
||||
return "text-red-400";
|
||||
default:
|
||||
return "text-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const filteredTutorials = tutorials.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 filteredTutorials = tutorials.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;
|
||||
|
||||
return matchesSearch && matchesCategory && matchesDifficulty;
|
||||
});
|
||||
|
||||
|
|
@ -188,9 +221,10 @@ export default function Tutorials() {
|
|||
AeThex Tutorials
|
||||
</h1>
|
||||
<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>
|
||||
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 mb-6">
|
||||
<div className="flex-1">
|
||||
|
|
@ -247,13 +281,15 @@ export default function Tutorials() {
|
|||
onClick={() => setSelectedCategory(category.id)}
|
||||
className={`w-full flex items-center justify-between p-3 rounded-lg transition-all ${
|
||||
selectedCategory === category.id
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50'
|
||||
? "bg-purple-600 text-white"
|
||||
: "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<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>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{category.count}
|
||||
|
|
@ -275,7 +311,10 @@ export default function Tutorials() {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{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">
|
||||
<img
|
||||
src={tutorial.thumbnail}
|
||||
|
|
@ -283,7 +322,10 @@ export default function Tutorials() {
|
|||
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">
|
||||
<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" />
|
||||
Start Tutorial
|
||||
</Button>
|
||||
|
|
@ -299,25 +341,27 @@ export default function Tutorials() {
|
|||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{tutorial.category}
|
||||
</Badge>
|
||||
<Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}>
|
||||
<Badge
|
||||
className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
|
||||
>
|
||||
{tutorial.difficulty}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
|
||||
{tutorial.title}
|
||||
</h3>
|
||||
|
||||
|
||||
<p className="text-gray-400 text-sm mb-3 line-clamp-2">
|
||||
{tutorial.description}
|
||||
</p>
|
||||
|
||||
|
||||
<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">
|
||||
|
|
@ -330,7 +374,7 @@ export default function Tutorials() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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">
|
||||
|
|
@ -348,10 +392,14 @@ export default function Tutorials() {
|
|||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-colors" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-wrap gap-1 mt-3">
|
||||
{tutorial.tags.slice(0, 3).map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
className="text-xs"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
|
|
@ -369,7 +417,8 @@ export default function Tutorials() {
|
|||
No tutorials found
|
||||
</h3>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -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 { Badge } from "@/components/ui/badge";
|
||||
import { Link } from "react-router-dom";
|
||||
|
|
@ -26,16 +32,17 @@ const quickStartCards = [
|
|||
icon: Rocket,
|
||||
href: "/docs/getting-started",
|
||||
duration: "5 min read",
|
||||
difficulty: "Beginner"
|
||||
difficulty: "Beginner",
|
||||
},
|
||||
{
|
||||
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,
|
||||
href: "/docs/tutorials",
|
||||
duration: "15 min",
|
||||
difficulty: "Beginner",
|
||||
isNew: true
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
title: "API Integration",
|
||||
|
|
@ -43,7 +50,7 @@ const quickStartCards = [
|
|||
icon: Code,
|
||||
href: "/docs/api",
|
||||
duration: "10 min read",
|
||||
difficulty: "Intermediate"
|
||||
difficulty: "Intermediate",
|
||||
},
|
||||
{
|
||||
title: "CLI Tools",
|
||||
|
|
@ -51,8 +58,8 @@ const quickStartCards = [
|
|||
icon: Terminal,
|
||||
href: "/docs/cli",
|
||||
duration: "8 min read",
|
||||
difficulty: "Intermediate"
|
||||
}
|
||||
difficulty: "Intermediate",
|
||||
},
|
||||
];
|
||||
|
||||
const resourceSections = [
|
||||
|
|
@ -61,8 +68,13 @@ const resourceSections = [
|
|||
description: "Step-by-step tutorials and comprehensive guides",
|
||||
icon: Video,
|
||||
href: "/docs/tutorials",
|
||||
items: ["Platform Quick Start", "Game Development", "AI Integration", "Performance Optimization"],
|
||||
badge: "6 tutorials"
|
||||
items: [
|
||||
"Platform Quick Start",
|
||||
"Game Development",
|
||||
"AI Integration",
|
||||
"Performance Optimization",
|
||||
],
|
||||
badge: "6 tutorials",
|
||||
},
|
||||
{
|
||||
title: "API Reference",
|
||||
|
|
@ -70,16 +82,21 @@ const resourceSections = [
|
|||
icon: Code,
|
||||
href: "/docs/api",
|
||||
items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
|
||||
badge: "40+ endpoints"
|
||||
badge: "40+ endpoints",
|
||||
},
|
||||
{
|
||||
title: "Examples",
|
||||
description: "Ready-to-use code examples and templates",
|
||||
icon: FileText,
|
||||
href: "/docs/examples",
|
||||
items: ["React Components", "Game Templates", "API Integration", "Deployment Scripts"],
|
||||
badge: "25+ examples"
|
||||
}
|
||||
items: [
|
||||
"React Components",
|
||||
"Game Templates",
|
||||
"API Integration",
|
||||
"Deployment Scripts",
|
||||
],
|
||||
badge: "25+ examples",
|
||||
},
|
||||
];
|
||||
|
||||
const featuredUpdates = [
|
||||
|
|
@ -88,20 +105,20 @@ const featuredUpdates = [
|
|||
description: "Learn how to integrate cutting-edge AI features",
|
||||
date: "2 days ago",
|
||||
type: "Tutorial",
|
||||
isNew: true
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
title: "API v2.1 Documentation",
|
||||
description: "Updated API docs with new endpoints and features",
|
||||
date: "1 week ago",
|
||||
type: "API"
|
||||
type: "API",
|
||||
},
|
||||
{
|
||||
title: "Performance Best Practices",
|
||||
description: "New guide on optimizing application performance",
|
||||
date: "2 weeks ago",
|
||||
type: "Guide"
|
||||
}
|
||||
type: "Guide",
|
||||
},
|
||||
];
|
||||
|
||||
export default function DocsOverview() {
|
||||
|
|
@ -113,18 +130,28 @@ export default function DocsOverview() {
|
|||
Welcome to AeThex Documentation
|
||||
</h2>
|
||||
<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.
|
||||
Get started with our guides, explore our APIs, and learn from comprehensive tutorials.
|
||||
Everything you need to build, deploy, and scale amazing projects with
|
||||
AeThex. Get started with our guides, explore our APIs, and learn from
|
||||
comprehensive tutorials.
|
||||
</p>
|
||||
|
||||
|
||||
<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">
|
||||
<Rocket className="h-5 w-5 mr-2" />
|
||||
Get Started
|
||||
</Link>
|
||||
</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">
|
||||
<Play className="h-5 w-5 mr-2" />
|
||||
Watch Tutorials
|
||||
|
|
@ -140,7 +167,10 @@ export default function DocsOverview() {
|
|||
{quickStartCards.map((card, index) => {
|
||||
const Icon = card.icon;
|
||||
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}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
|
|
@ -175,19 +205,22 @@ export default function DocsOverview() {
|
|||
|
||||
{/* Resource Sections */}
|
||||
<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">
|
||||
{resourceSections.map((section, index) => {
|
||||
const Icon = section.icon;
|
||||
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}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Icon className="h-8 w-8 text-purple-400" />
|
||||
<Badge variant="outline">
|
||||
{section.badge}
|
||||
</Badge>
|
||||
<Badge variant="outline">{section.badge}</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-white group-hover:text-purple-400 transition-colors">
|
||||
{section.title}
|
||||
|
|
@ -199,7 +232,10 @@ export default function DocsOverview() {
|
|||
<CardContent>
|
||||
<ul className="space-y-2 mb-4">
|
||||
{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" />
|
||||
{item}
|
||||
</li>
|
||||
|
|
@ -221,13 +257,20 @@ export default function DocsOverview() {
|
|||
<div className="mb-12">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<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
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
|
|
@ -242,7 +285,9 @@ export default function DocsOverview() {
|
|||
{update.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">{update.description}</p>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{update.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500">{update.date}</p>
|
||||
|
|
@ -267,7 +312,10 @@ export default function DocsOverview() {
|
|||
</CardDescription>
|
||||
</CardHeader>
|
||||
<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" />
|
||||
View on GitHub
|
||||
</Button>
|
||||
|
|
@ -285,7 +333,10 @@ export default function DocsOverview() {
|
|||
</CardDescription>
|
||||
</CardHeader>
|
||||
<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" />
|
||||
Join Community
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
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 { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
|
@ -27,7 +33,7 @@ interface DocsTutorial {
|
|||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
difficulty: 'beginner' | 'intermediate' | 'advanced';
|
||||
difficulty: "beginner" | "intermediate" | "advanced";
|
||||
duration: string;
|
||||
author: string;
|
||||
rating: number;
|
||||
|
|
@ -35,7 +41,7 @@ interface DocsTutorial {
|
|||
likes: number;
|
||||
tags: string[];
|
||||
isNew?: boolean;
|
||||
type: 'video' | 'article' | 'interactive';
|
||||
type: "video" | "article" | "interactive";
|
||||
path: string;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +49,8 @@ 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.",
|
||||
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",
|
||||
|
|
@ -54,12 +61,13 @@ const docsTutorials: DocsTutorial[] = [
|
|||
tags: ["platform", "basics", "quickstart"],
|
||||
isNew: true,
|
||||
type: "video",
|
||||
path: "/docs/tutorials/quickstart"
|
||||
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.",
|
||||
description:
|
||||
"Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.",
|
||||
category: "Setup",
|
||||
difficulty: "beginner",
|
||||
duration: "15 min",
|
||||
|
|
@ -69,12 +77,13 @@ const docsTutorials: DocsTutorial[] = [
|
|||
likes: 287,
|
||||
tags: ["setup", "configuration", "projects"],
|
||||
type: "article",
|
||||
path: "/docs/tutorials/project-setup"
|
||||
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.",
|
||||
description:
|
||||
"Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.",
|
||||
category: "API Integration",
|
||||
difficulty: "intermediate",
|
||||
duration: "25 min",
|
||||
|
|
@ -84,12 +93,13 @@ const docsTutorials: DocsTutorial[] = [
|
|||
likes: 198,
|
||||
tags: ["api", "integration", "authentication"],
|
||||
type: "interactive",
|
||||
path: "/docs/tutorials/api-integration"
|
||||
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.",
|
||||
description:
|
||||
"Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.",
|
||||
category: "Game Development",
|
||||
difficulty: "intermediate",
|
||||
duration: "45 min",
|
||||
|
|
@ -99,12 +109,13 @@ const docsTutorials: DocsTutorial[] = [
|
|||
likes: 523,
|
||||
tags: ["games", "development", "tools"],
|
||||
type: "video",
|
||||
path: "/docs/tutorials/game-development"
|
||||
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.",
|
||||
description:
|
||||
"Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.",
|
||||
category: "Database",
|
||||
difficulty: "advanced",
|
||||
duration: "35 min",
|
||||
|
|
@ -114,12 +125,13 @@ const docsTutorials: DocsTutorial[] = [
|
|||
likes: 165,
|
||||
tags: ["database", "optimization", "patterns"],
|
||||
type: "article",
|
||||
path: "/docs/tutorials/database-patterns"
|
||||
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.",
|
||||
description:
|
||||
"Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.",
|
||||
category: "AI/ML",
|
||||
difficulty: "advanced",
|
||||
duration: "60 min",
|
||||
|
|
@ -130,8 +142,8 @@ const docsTutorials: DocsTutorial[] = [
|
|||
tags: ["ai", "machine-learning", "integration"],
|
||||
isNew: true,
|
||||
type: "interactive",
|
||||
path: "/docs/tutorials/ai-integration"
|
||||
}
|
||||
path: "/docs/tutorials/ai-integration",
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
|
|
@ -152,40 +164,60 @@ export default function DocsTutorials() {
|
|||
|
||||
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';
|
||||
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;
|
||||
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';
|
||||
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;
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
|
|
@ -197,9 +229,10 @@ export default function DocsTutorials() {
|
|||
Documentation Tutorials
|
||||
</h2>
|
||||
<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>
|
||||
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 mb-6">
|
||||
<div className="flex-1">
|
||||
|
|
@ -257,8 +290,8 @@ export default function DocsTutorials() {
|
|||
onClick={() => setSelectedCategory(category.id)}
|
||||
className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-all ${
|
||||
selectedCategory === category.id
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50'
|
||||
? "bg-purple-600 text-white"
|
||||
: "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
|
|
@ -282,16 +315,23 @@ export default function DocsTutorials() {
|
|||
{filteredTutorials.map((tutorial) => {
|
||||
const TypeIcon = getTypeIcon(tutorial.type);
|
||||
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">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<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">
|
||||
{tutorial.category}
|
||||
</Badge>
|
||||
<Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}>
|
||||
<Badge
|
||||
className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
|
||||
>
|
||||
{tutorial.difficulty}
|
||||
</Badge>
|
||||
{tutorial.isNew && (
|
||||
|
|
@ -300,15 +340,15 @@ export default function DocsTutorials() {
|
|||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
|
||||
{tutorial.title}
|
||||
</h3>
|
||||
|
||||
|
||||
<p className="text-gray-400 mb-4">
|
||||
{tutorial.description}
|
||||
</p>
|
||||
|
||||
|
||||
<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">
|
||||
|
|
@ -332,7 +372,7 @@ export default function DocsTutorials() {
|
|||
{tutorial.likes}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Button className="bg-purple-600 hover:bg-purple-700">
|
||||
Start Tutorial
|
||||
<ChevronRight className="h-4 w-4 ml-2" />
|
||||
|
|
@ -354,7 +394,8 @@ export default function DocsTutorials() {
|
|||
No tutorials found
|
||||
</h3>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
Loading…
Reference in a new issue