← back to Watches

src/components/Header.jsx

44 lines

import React from 'react';

function Header({ view, setView }) {
  const navItems = [
    { id: 'dashboard', label: '📊 Dashboard', icon: '📊' },
    { id: 'list', label: '⌚ Watch List', icon: '⌚' },
    { id: 'compare', label: '📈 Compare', icon: '📈' }
  ];

  return (
    <header className="gradient-omega text-white shadow-lg">
      <div className="container mx-auto px-4 py-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-4">
            <div className="text-4xl">⌚</div>
            <div>
              <h1 className="text-3xl font-bold">Omega Watch Price History</h1>
              <p className="text-sm text-gray-200">Historical Price Tracking & Analysis</p>
            </div>
          </div>
        </div>

        <nav className="flex space-x-2">
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => setView(item.id)}
              className={`px-6 py-3 rounded-lg font-semibold transition-all ${
                view === item.id
                  ? 'bg-white text-omega-red shadow-md'
                  : 'bg-omega-navy/50 hover:bg-omega-navy/70 text-white'
              }`}
            >
              {item.label}
            </button>
          ))}
        </nav>
      </div>
    </header>
  );
}

export default Header;