`cypressaward/frontend/components/navigation.tsx`

93 lines
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu'
import { Menu, Scale, Building2, Users, Award, FileText, LogIn, Briefcase } from 'lucide-react'

export function Navigation() {
  const pathname = usePathname()

  const navLinks = [
    { href: '/cases', label: 'Browse Cases', icon: Scale },
    { href: '/awards', label: 'Awards', icon: Award },
    { href: '/law-firms', label: 'Law Firms', icon: Building2 },
    { href: '/administrators', label: 'Settlement Firms', icon: Briefcase },
    { href: '/nonprofits', label: 'Nonprofits', icon: Users },
    { href: '/news', label: 'News', icon: FileText },
  ]

  return (
    <nav className="border-b bg-white">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center space-x-8">
            <Link href="/" className="flex items-center space-x-2">
              <Scale className="h-6 w-6 text-blue-600" />
              <span className="text-xl font-bold">Cy Pres Platform</span>
            </Link>
            
            <div className="hidden md:flex space-x-6">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`text-sm font-medium transition-colors hover:text-blue-600 ${
                    pathname === link.href ? 'text-blue-600' : 'text-gray-700'
                  }`}
                >
                  {link.label}
                </Link>
              ))}
            </div>
          </div>

          <div className="flex items-center space-x-4">
            <Link href="/nonprofit/register">
              <Button variant="outline" size="sm">
                Register Nonprofit
              </Button>
            </Link>
            <Link href="/law-firm/register">
              <Button variant="outline" size="sm">
                Register Law Firm
              </Button>
            </Link>
            <Link href="/login">
              <Button size="sm">
                <LogIn className="h-4 w-4 mr-2" />
                Login
              </Button>
            </Link>

            <div className="md:hidden">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <Menu className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  {navLinks.map((link) => (
                    <DropdownMenuItem key={link.href} asChild>
                      <Link href={link.href} className="flex items-center">
                        <link.icon className="h-4 w-4 mr-2" />
                        {link.label}
                      </Link>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>
    </nav>
  )
}