Experience Vibecoding
with Claude Code

import { useState } from 'react';
import { Moon, Sun, Menu } from 'lucide-react';

export default function Navigation() {
  const [isDark, setIsDark] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="bg-white dark:bg-gray-900 shadow-lg">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="text-xl font-bold">Logo</div>
          
          <div className="hidden md:flex space-x-8">
            <a href="#" className="hover:text-primary">Home</a>
            <a href="#" className="hover:text-primary">Features</a>
            <a href="#" className="hover:text-primary">Pricing</a>
          </div>

          <button onClick={() => setIsDark(!isDark)}>
            {isDark ? <Sun /> : <Moon />}
          </button>
        </div>
      </div>
    </nav>
  );
}