Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x | import React from 'react';
import { useTranslation } from 'react-i18next';
import { Search, Moon, Sun, Menu } from 'lucide-react';
import { User } from '../types';
import UserProfileDropdown from './UserProfileDropdown';
import LanguageSelector from './LanguageSelector';
import NotificationDropdown from './NotificationDropdown';
import SandboxToggle from './SandboxToggle';
import { useSandbox } from '../contexts/SandboxContext';
interface TopBarProps {
user: User;
isDarkMode: boolean;
toggleTheme: () => void;
onMenuClick: () => void;
onTicketClick?: (ticketId: string) => void;
}
const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick, onTicketClick }) => {
const { t } = useTranslation();
const { isSandbox, sandboxEnabled, toggleSandbox, isToggling } = useSandbox();
return (
<header className="flex items-center justify-between h-16 px-4 sm:px-8 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 transition-colors duration-200 shrink-0">
<div className="flex items-center gap-4">
<button
onClick={onMenuClick}
className="p-2 -ml-2 text-gray-500 rounded-md md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
aria-label="Open sidebar"
>
<Menu size={24} />
</button>
<div className="relative hidden md:block w-96">
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<Search size={18} />
</span>
<input
type="text"
placeholder={t('common.search')}
className="w-full py-2 pl-10 pr-4 text-sm text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-200"
/>
</div>
</div>
<div className="flex items-center gap-4">
{/* Sandbox Mode Toggle */}
<SandboxToggle
isSandbox={isSandbox}
sandboxEnabled={sandboxEnabled}
onToggle={toggleSandbox}
isToggling={isToggling}
/>
<LanguageSelector />
<button
onClick={toggleTheme}
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
>
{isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
</button>
<NotificationDropdown onTicketClick={onTicketClick} />
<UserProfileDropdown user={user} />
</div>
</header>
);
};
export default TopBar;
|