55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
/**
|
|
* 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-dom';
|
|
import Button from '../ui/button/Button';
|
|
|
|
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={`inline-flex gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-800/50 shadow-sm border border-gray-200 dark:border-gray-700 ${className}`}>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTabId === tab.path || location.pathname.startsWith(tab.path + '/');
|
|
|
|
return (
|
|
<Link key={tab.path} to={tab.path}>
|
|
<Button
|
|
variant={isActive ? 'primary' : 'secondary'}
|
|
size="sm"
|
|
startIcon={tab.icon}
|
|
>
|
|
{tab.label}
|
|
</Button>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|