File size: 2,579 Bytes
80b95e8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Bot, Circle, Download } from "lucide-react";
import { useState } from "react";
const navigationItems = [
{ id: "overview", label: "Overview", icon: "fas fa-home" },
{ id: "modules", label: "Modules", icon: "fas fa-cube" },
{ id: "configuration", label: "Configuration", icon: "fas fa-cog" },
{ id: "commands", label: "CLI Commands", icon: "fas fa-terminal" },
{ id: "deployment", label: "Deployment", icon: "fas fa-rocket" },
];
const quickActions = [
{ label: "Initialize Project", icon: "fas fa-play" },
{ label: "Download Models", icon: "fas fa-download" },
{ label: "Run Tests", icon: "fas fa-test-tube" },
];
interface NavigationProps {
activeSection: string;
onSectionChange: (section: string) => void;
}
export function Navigation({ activeSection, onSectionChange }: NavigationProps) {
return (
<aside className="space-y-4 sticky top-24">
<Card className="p-4 border-border bg-card">
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wide text-muted-foreground">
Project Setup
</h3>
<ul className="space-y-2">
{navigationItems.map((item) => (
<li key={item.id}>
<button
onClick={() => onSectionChange(item.id)}
className={`flex items-center space-x-3 w-full px-3 py-2 rounded-md text-sm font-medium transition-colors ${
activeSection === item.id
? "text-primary bg-primary/10"
: "text-foreground hover:text-primary"
}`}
data-testid={`nav-${item.id}`}
>
<i className={`${item.icon} w-4`}></i>
<span>{item.label}</span>
</button>
</li>
))}
</ul>
</Card>
<Card className="p-4 border-border bg-card">
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wide text-muted-foreground">
Quick Actions
</h3>
<div className="space-y-3">
{quickActions.map((action, index) => (
<Button
key={index}
variant="secondary"
className="w-full justify-start text-left"
data-testid={`action-${action.label.toLowerCase().replace(/\s+/g, '-')}`}
>
<i className={`${action.icon} mr-2`}></i>
{action.label}
</Button>
))}
</div>
</Card>
</aside>
);
}
|