components/Header.js

import Link from 'next/link';

export default function Header() {
  return (
    <header className="w-full bg-slate-900 border-b border-slate-700 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-bold">
            W
          </div>
          <h1 className="text-xl font-bold text-white">Wan2.2 LoRA Manager</h1>
        </div>
        <nav>
          <Link 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm font-medium text-slate-300 hover:text-white transition-colors duration-200 px-3 py-2 rounded-md hover:bg-slate-800"
          >
            Built with anycoder
          </Link>
        </nav>
      </div>
    </header>
  );
}