50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import { useState, useRef } from 'react';
|
||
|
|
|
||
|
|
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 />
|
||
|
|
</button>
|
||
|
|
<h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||
|
|
LearnHub
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SearchBar recentSearches={recentSearches} />
|
||
|
|
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<NotificationsDropdown
|
||
|
|
notifications={notifications}
|
||
|
|
notificationItems={notificationItems}
|
||
|
|
/>
|
||
|
|
<UserMenuDropdown />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|