47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
|
|
import { NotificationsDropdown } from './notifications-dropdown';
|
|
import { SearchBar } from './search-bar';
|
|
import { UserMenuDropdown } from './usermenu-dropdown';
|
|
import { Bars3Icon } from '@heroicons/react/24/outline';
|
|
|
|
interface TopNavBarProps {
|
|
sidebarOpen: boolean;
|
|
setSidebarOpen: (open: boolean) => void;
|
|
notifications: number;
|
|
notificationItems: Array<any>;
|
|
recentSearches: string[];
|
|
}
|
|
export function TopNavBar({
|
|
sidebarOpen,
|
|
setSidebarOpen,
|
|
notifications,
|
|
notificationItems,
|
|
recentSearches
|
|
}: TopNavBarProps) {
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-50">
|
|
<div className="flex items-center justify-between h-full px-4">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<Bars3Icon className='w-5 h-5' />
|
|
</button>
|
|
<h1 className="text-xl font-semibold text-slate-800 tracking-wide">
|
|
fhmooc
|
|
</h1>
|
|
</div>
|
|
|
|
<SearchBar recentSearches={recentSearches} />
|
|
|
|
<div className="flex items-center gap-4">
|
|
<NotificationsDropdown
|
|
notifications={notifications}
|
|
notificationItems={notificationItems}
|
|
/>
|
|
<UserMenuDropdown />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |