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)
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Menu } from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
import { es } from 'date-fns/locale';
|
|
import { Logo } from './Logo';
|
|
|
|
interface HeaderProps {
|
|
onMenuClick: () => void;
|
|
title: string;
|
|
}
|
|
|
|
export function Header({ onMenuClick, title }: HeaderProps) {
|
|
const currentDate = format(new Date(), "EEEE, d 'de' MMMM 'de' yyyy", {
|
|
locale: es,
|
|
});
|
|
|
|
// Capitalizar primera letra
|
|
const formattedDate =
|
|
currentDate.charAt(0).toUpperCase() + currentDate.slice(1);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-30 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
|
|
<div className="flex items-center justify-between h-16 px-4 md:px-6">
|
|
{/* Left section */}
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={onMenuClick}
|
|
className="lg:hidden p-2 -ml-2 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-lg transition-colors"
|
|
aria-label="Abrir menú"
|
|
>
|
|
<Menu className="w-6 h-6" />
|
|
</button>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="lg:hidden">
|
|
<Logo size="sm" showText={false} />
|
|
</div>
|
|
<h1 className="text-lg md:text-xl font-semibold text-slate-100">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right section */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<Logo size="sm" showText />
|
|
</div>
|
|
<time className="text-sm text-slate-400 hidden sm:block">
|
|
{formattedDate}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|