712b06f118
Complete personal finance management application with: - Dashboard with financial metrics and alerts - Credit card management and payments - Fixed and variable debt tracking - Monthly budget planning - Intelligent alert system - Responsive design with Tailwind CSS Tech stack: Next.js 14, TypeScript, Zustand, Recharts 🤖 Generated with [Claude Code](https://claude.com/claude-code)
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
LayoutDashboard,
|
|
Wallet,
|
|
CreditCard,
|
|
PiggyBank,
|
|
Bell,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface MobileNavProps {
|
|
unreadAlertsCount?: number;
|
|
}
|
|
|
|
const navigationItems = [
|
|
{ name: 'Dashboard', href: '/', icon: LayoutDashboard },
|
|
{ name: 'Deudas', href: '/debts', icon: Wallet },
|
|
{ name: 'Tarjetas', href: '/cards', icon: CreditCard },
|
|
{ name: 'Presupuesto', href: '/budget', icon: PiggyBank },
|
|
{ name: 'Alertas', href: '/alerts', icon: Bell, hasBadge: true },
|
|
];
|
|
|
|
export function MobileNav({ unreadAlertsCount = 0 }: MobileNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === '/';
|
|
}
|
|
return pathname.startsWith(href);
|
|
};
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-40 bg-slate-900 border-t border-slate-800 lg:hidden">
|
|
<ul className="flex items-center justify-around h-16">
|
|
{navigationItems.map((item) => {
|
|
const active = isActive(item.href);
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<li key={item.name} className="flex-1">
|
|
<Link
|
|
href={item.href}
|
|
className={`
|
|
flex flex-col items-center justify-center gap-1 py-2
|
|
transition-colors relative
|
|
${
|
|
active
|
|
? 'text-emerald-500'
|
|
: 'text-slate-400 hover:text-slate-300'
|
|
}
|
|
`}
|
|
>
|
|
<div className="relative">
|
|
<Icon className="w-6 h-6" />
|
|
{item.hasBadge && unreadAlertsCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-semibold bg-red-500 text-white rounded-full">
|
|
{unreadAlertsCount > 99 ? '99+' : unreadAlertsCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-[10px] font-medium">{item.name}</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|