124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
LayoutDashboard,
|
|
Grid3x3,
|
|
Activity,
|
|
Target,
|
|
Map,
|
|
DollarSign,
|
|
BarChart,
|
|
Download,
|
|
Share2
|
|
} from 'lucide-react';
|
|
import clsx from 'clsx';
|
|
|
|
interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
interface DashboardNavigationProps {
|
|
activeSection: string;
|
|
onSectionChange: (sectionId: string) => void;
|
|
onExport?: () => void;
|
|
onShare?: () => void;
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ id: 'overview', label: 'Resumen', icon: LayoutDashboard },
|
|
{ id: 'dimensions', label: 'Dimensiones', icon: Grid3x3 },
|
|
{ id: 'heatmap', label: 'Heatmap', icon: Activity },
|
|
{ id: 'opportunities', label: 'Oportunidades', icon: Target },
|
|
{ id: 'roadmap', label: 'Roadmap', icon: Map },
|
|
{ id: 'economics', label: 'Modelo Económico', icon: DollarSign },
|
|
{ id: 'benchmark', label: 'Benchmark', icon: BarChart },
|
|
];
|
|
|
|
const DashboardNavigation: React.FC<DashboardNavigationProps> = ({
|
|
activeSection,
|
|
onSectionChange,
|
|
onExport,
|
|
onShare,
|
|
}) => {
|
|
const scrollToSection = (sectionId: string) => {
|
|
onSectionChange(sectionId);
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="sticky top-0 bg-white border-b border-slate-200 z-50 shadow-sm">
|
|
<div className="max-w-screen-2xl mx-auto px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
{/* Navigation Items */}
|
|
<div className="flex items-center gap-1 overflow-x-auto">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = activeSection === item.id;
|
|
|
|
return (
|
|
<motion.button
|
|
key={item.id}
|
|
onClick={() => scrollToSection(item.id)}
|
|
className={clsx(
|
|
'relative flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap',
|
|
isActive
|
|
? 'text-blue-600 bg-blue-50'
|
|
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
|
|
)}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{item.label}</span>
|
|
|
|
{isActive && (
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
|
layoutId="activeIndicator"
|
|
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
|
/>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex items-center gap-2 ml-4">
|
|
{onShare && (
|
|
<motion.button
|
|
onClick={onShare}
|
|
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<Share2 size={16} />
|
|
<span className="hidden sm:inline">Compartir</span>
|
|
</motion.button>
|
|
)}
|
|
|
|
{onExport && (
|
|
<motion.button
|
|
onClick={onExport}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<Download size={16} />
|
|
<span className="hidden sm:inline">Exportar</span>
|
|
</motion.button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default DashboardNavigation;
|