9a79decda3
- Fix broken Tailwind gap classes by implementing custom CSS spacing system - Add .form-row and .button-group classes for consistent 16px and 12px spacing - Replace broken SVG icons with reliable emoji icons throughout application - Implement comprehensive button system with proper sizing and color coding: * btn-success (green) for add/save actions * btn-danger (red) for delete actions * btn-secondary (glass) for edit/cancel actions * btn-sm for smaller buttons with proper proportions Updated all pages with consistent spacing: - Header: Fixed navigation button spacing with button-group class - Teams: Fixed add team form and action button spacing - Streams: Moved Add Stream button to same line as team dropdown - Home: Updated edit button styling and spacing - Edit: Fixed all form buttons with proper spacing and modern icons Enhanced user experience: - Professional button hover effects with subtle animations - Consistent visual hierarchy with proper spacing - Responsive design maintained across all screen sizes - Modern glass morphism design with improved accessibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
58 lines
No EOL
1.9 KiB
TypeScript
58 lines
No EOL
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
return (
|
|
<header className="glass p-6 mb-8">
|
|
<div className="container">
|
|
<div className="flex justify-between items-center">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
|
<svg className="icon-md text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold">OBS Stream Manager</h1>
|
|
<p className="text-sm opacity-80">Professional Control</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="button-group">
|
|
<Link
|
|
href="/"
|
|
className={`btn ${isActive('/') ? 'active' : ''}`}
|
|
>
|
|
<span className="icon">🏠</span>
|
|
Home
|
|
</Link>
|
|
|
|
<Link
|
|
href="/add"
|
|
className={`btn ${isActive('/add') ? 'active' : ''}`}
|
|
>
|
|
<span className="icon">🎥</span>
|
|
Streams
|
|
</Link>
|
|
|
|
<Link
|
|
href="/teams"
|
|
className={`btn ${isActive('/teams') ? 'active' : ''}`}
|
|
>
|
|
<span className="icon">👥</span>
|
|
Teams
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |