Files
postcast-tool/components/Header.js
T
Ник (Claude) 1fbdc9f9b9 feat: unified admin panel + back buttons everywhere
AdminPanel.js: sidebar nav с 4 разделами (Настройки API, ЮKassa, Расходы AI, Пользователи)
  Встроены: SettingsSection (API-ключи), SpendingSection (расходы), AdminBilling
  Breadcrumb навигация
/system/page.js: теперь рендерит AdminPanel
Header: 'Расходы' → 'Админ' (ссылка на /system), убран TrendingUp
BackButton.js: переиспользуемая кнопка назад
  Добавлена на /drafts, /billing, /plans
2026-06-12 23:57:38 +03:00

72 lines
3.0 KiB
JavaScript

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Sparkles, LogOut, Settings2, CalendarDays, Coins, FileText } from 'lucide-react';
import ThemeToggle from './ThemeToggle';
export default function Header({ user }) {
const router = useRouter();
const [credits, setCredits] = useState(null);
useEffect(() => {
if (!user) return;
const refresh = () => fetch('/api/billing/balance').then(r => r.json())
.then(d => setCredits(d.isUnlimited ? '∞' : d.credits)).catch(() => {});
refresh();
window.addEventListener('credits-updated', refresh);
return () => window.removeEventListener('credits-updated', refresh);
}, [user?.id]);
async function logout() {
await fetch('/api/auth/logout', { method: 'POST' });
router.push('/login');
}
return (
<header className="border-b border-border bg-bg/80 backdrop-blur sticky top-0 z-10">
<div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 hover:opacity-80">
<Sparkles className="w-5 h-5 text-accent" />
<span className="font-bold">ZeroPost</span>
</Link>
<nav className="hidden sm:flex items-center gap-1">
<Link href="/calendar" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
<CalendarDays className="w-4 h-4" />
<span>Календарь</span>
</Link>
<Link href="/drafts" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
<FileText className="w-4 h-4" />
<span>Черновики</span>
</Link>
{user?.isAdmin && (
<Link href="/system" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
<Settings2 className="w-4 h-4" />
<span>Админ</span>
</Link>
)}
</nav>
<div className="flex items-center gap-2">
{/* Баланс кредитов */}
{credits !== null && (
<Link href="/billing" className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-accent/10 hover:bg-accent/20 transition-colors text-sm font-medium text-accent">
<Coins className="w-3.5 h-3.5" />
<span>{credits} кр</span>
</Link>
)}
{user?.isAdmin && (
<Link href="/system" className="btn-ghost p-2 text-sm hidden sm:inline-flex" title="Системные настройки">
<Settings2 className="w-4 h-4" />
<span className="hidden md:inline">Система</span>
</Link>
)}
<span className="text-sm text-gray-500 hidden sm:inline mr-2">{user?.email}</span>
<ThemeToggle />
<button onClick={logout} className="btn-ghost p-2" title="Выйти">
<LogOut className="w-4 h-4" />
</button>
</div>
</div>
</header>
);
}