📦 awasthi21 / AISystemDesigner

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
60import { useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Share, Save, Code, FileBarChart, FileText, FileJson } from "lucide-react";

interface TabNavProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  onSave?: () => void;
  onShare?: () => void;
}

export default function TabNav({ 
  activeTab, 
  onTabChange, 
  onSave, 
  onShare 
}: TabNavProps) {
  const tabs = [
    { id: 'design', label: 'Design Editor', icon: <Code className="mr-1 h-4 w-4" /> },
    { id: 'cost', label: 'Cost Analysis', icon: <FileBarChart className="mr-1 h-4 w-4" /> },
    { id: 'documentation', label: 'Documentation', icon: <FileText className="mr-1 h-4 w-4" /> },
    { id: 'export', label: 'Export', icon: <FileJson className="mr-1 h-4 w-4" /> },
  ];

  return (
    <div className="flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
      <div className="flex space-x-1 w-full">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={cn(
              "px-4 py-3 text-sm font-medium flex items-center transition-colors rounded-t-md",
              activeTab === tab.id
                ? "text-primary-600 border-b-2 border-primary-600 dark:text-primary-400 dark:border-primary-400 bg-gray-50 dark:bg-gray-800"
                : "text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800"
            )}
            onClick={() => onTabChange(tab.id)}
          >
            {tab.icon}
            {tab.label}
          </button>
        ))}
      </div>
      <div className="flex space-x-2 px-2">
        {onShare && (
          <Button variant="outline" size="sm" onClick={onShare}>
            <Share className="mr-1 h-4 w-4" /> Share
          </Button>
        )}
        {onSave && (
          <Button size="sm" onClick={onSave}>
            <Save className="mr-1 h-4 w-4" /> Save Changes
          </Button>
        )}
      </div>
    </div>
  );
}