frontend-refactor-1

frontend/src/components/navigation/ModuleNavigationTabs.tsx

@@ -0,0 +1,66 @@
+/**
+ * ModuleNavigationTabs - Reusable in-page tab navigation component
+ * Used across Planner, Writer, Linker, Optimizer, Thinker, Automation, Sites modules
+ * Follows standard app design system and color scheme
+ */
+
+import React from 'react';
+import { Link, useLocation } from 'react-router';
+import { Tabs, TabList, Tab } from '../ui/tabs/Tabs';
+
+export interface NavigationTab {
+  label: string;
+  path: string;
+  icon?: React.ReactNode;
+}
+
+interface ModuleNavigationTabsProps {
+  tabs: NavigationTab[];
+  className?: string;
+}
+
+export default function ModuleNavigationTabs({ tabs, className = '' }: ModuleNavigationTabsProps) {
+  const location = useLocation();
+
+  // Find active tab based on current path
+  const activeTab = tabs.find(tab => {
+    if (tab.path === location.pathname) return true;
+    // Handle nested routes (e.g., /planner/keywords/123 should match /planner/keywords)
+    return location.pathname.startsWith(tab.path + '/');
+  });
+
+  const activeTabId = activeTab?.path || tabs[0]?.path || '';
+
+  return (
+    <div className={`mb-6 ${className}`}>
+      <Tabs defaultTab={activeTabId}>
+        {(activeTabId, setActiveTab) => (
+          <TabList className="bg-gray-100 dark:bg-gray-900">
+            {tabs.map((tab) => {
+              const isActive = activeTabId === tab.path || location.pathname.startsWith(tab.path + '/');
+              
+              return (
+                <Link
+                  key={tab.path}
+                  to={tab.path}
+                  onClick={() => setActiveTab(tab.path)}
+                  className="flex-1"
+                >
+                  <Tab
+                    tabId={tab.path}
+                    isActive={isActive}
+                    className="flex items-center justify-center gap-2"
+                  >
+                    {tab.icon && <span className="flex-shrink-0">{tab.icon}</span>}
+                    <span>{tab.label}</span>
+                  </Tab>
+                </Link>
+              );
+            })}
+          </TabList>
+        )}
+      </Tabs>
+    </div>
+  );
+}
+