112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Link } from "react-router-dom";
|
|
import { Video, Headphones, Github, Download, LucideIcon } from "lucide-react";
|
|
import { useDocsTheme } from "@/contexts/DocsThemeContext";
|
|
|
|
export interface LearningResource {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
count: string;
|
|
link: string;
|
|
color: string;
|
|
}
|
|
|
|
const defaultResources: LearningResource[] = [
|
|
{
|
|
title: "Video tutorials",
|
|
description: "Visual learning with step-by-step walkthroughs",
|
|
icon: Video,
|
|
count: "50+ videos",
|
|
link: "/tutorials",
|
|
color: "from-red-500 to-pink-600",
|
|
},
|
|
{
|
|
title: "Podcast series",
|
|
description: "Deep dives into AeThex technology and strategy",
|
|
icon: Headphones,
|
|
count: "20+ episodes",
|
|
link: "/blog",
|
|
color: "from-purple-500 to-indigo-600",
|
|
},
|
|
{
|
|
title: "Code examples",
|
|
description: "Production-ready snippets maintained by the platform team",
|
|
icon: Github,
|
|
count: "100+ repos",
|
|
link: "/docs/examples",
|
|
color: "from-green-500 to-emerald-600",
|
|
},
|
|
{
|
|
title: "Downloads",
|
|
description: "SDKs, design kits, and tooling for every platform",
|
|
icon: Download,
|
|
count: "Latest releases",
|
|
link: "/docs/getting-started#setup-workflow",
|
|
color: "from-blue-500 to-cyan-600",
|
|
},
|
|
];
|
|
|
|
interface LearningResourcesGridProps {
|
|
resources?: LearningResource[];
|
|
}
|
|
|
|
export default function LearningResourcesGrid({
|
|
resources = defaultResources,
|
|
}: LearningResourcesGridProps) {
|
|
const { colors, theme } = useDocsTheme();
|
|
const hoverBorderColor =
|
|
theme === "professional"
|
|
? "hover:border-gray-400"
|
|
: "hover:border-purple-500/50";
|
|
|
|
return (
|
|
<div className="mb-12">
|
|
<h3 className={`text-2xl font-bold ${colors.headingColor} mb-6`}>
|
|
Learning resources
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{resources.map((resource, index) => {
|
|
const Icon = resource.icon;
|
|
return (
|
|
<Card
|
|
key={resource.title}
|
|
className={`text-center ${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div
|
|
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
|
|
>
|
|
<Icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<CardTitle className={`${colors.headingColor} text-lg`}>
|
|
{resource.title}
|
|
</CardTitle>
|
|
<CardDescription className={colors.textMuted}>
|
|
{resource.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Badge variant="outline" className="mb-4">
|
|
{resource.count}
|
|
</Badge>
|
|
<Button asChild size="sm" className="w-full">
|
|
<Link to={resource.link}>Explore</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|