File size: 2,836 Bytes
c0e8080 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
typescript
import React, { useState } from 'react'
import { useAuth } from '../contexts/AuthContext'
import { Search, Bell, Menu, User, LogOut } from 'lucide-react'
interface TopNavProps {
onMenuClick: () => void
}
const TopNav: React.FC<TopNavProps> = ({ onMenuClick }) => {
const { user, logout } = useAuth()
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
return (
<header className="bg-white shadow-sm border-b border-gray-200 z-30">
<div className="flex items-center justify-between h-16 px-4 md:px-6">
<div className="flex items-center">
<button
onClick={onMenuClick}
className="lg:hidden p-2 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100"
>
<Menu className="h-5 w-5" />
</button>
<div className="hidden md:block ml-4">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-4 w-4 text-gray-400" />
</div>
<input
type="text"
placeholder="Search assets, problems..."
className="input-field pl-10 pr-4 w-80"
/>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<button className="relative p-2 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100">
<Bell className="h-5 w-5" />
<span className="absolute top-1 right-1 h-2 w-2 bg-alert-500 rounded-full"></span>
</button>
<div className="relative">
<button
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="flex items-center space-x-3 p-2 rounded-button hover:bg-gray-100"
>
<div className="h-8 w-8 bg-primary-100 rounded-full flex items-center justify-center">
<User className="h-4 w-4 text-primary-600" />
</div>
<span className="hidden md:block text-sm font-medium text-gray-700">
{user?.name}
</span>
</button>
{isDropdownOpen && (
<div className="absolute right-0 mt-2 w-48 bg-white rounded-card shadow-lg border border-gray-200 py-1">
<button
onClick={logout}
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
>
<LogOut className="mr-3 h-4 w-4" />
Sign out
</button>
</div>
)}
</div>
</div>
</div>
</header>
)
}
export default TopNav
</html> |