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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 12x | // src/components/Header.tsx
import React from 'react';
import { ShoppingCartIcon } from './icons/ShoppingCartIcon';
import { UserIcon } from './icons/UserIcon';
import { Cog8ToothIcon } from './icons/Cog8ToothIcon';
import { MicrophoneIcon } from './icons/MicrophoneIcon';
import { Link } from 'react-router-dom';
import { ShieldCheckIcon } from './icons/ShieldCheckIcon';
import type { UserProfile } from '../types';
import type { AuthStatus } from '../hooks/useAuth';
export interface HeaderProps {
isDarkMode: boolean;
unitSystem: 'metric' | 'imperial';
authStatus: AuthStatus;
userProfile: UserProfile | null;
onOpenProfile: () => void;
onOpenVoiceAssistant: () => void;
onSignOut: () => void;
}
export const Header: React.FC<HeaderProps> = ({
isDarkMode,
unitSystem,
authStatus,
userProfile,
onOpenProfile,
onOpenVoiceAssistant,
onSignOut,
}) => {
// The state and handlers for the old AuthModal and SignUpModal have been removed.
return (
<>
<header className="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-20">
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<ShoppingCartIcon className="h-8 w-8 text-brand-primary" />
<h1 className="ml-3 text-2xl font-bold text-gray-800 dark:text-white">
Flyer Crawler
</h1>
</div>
<div className="flex items-center space-x-4 md:space-x-6">
{userProfile && (
<button
onClick={onOpenVoiceAssistant}
className="p-1.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
aria-label="Open voice assistant"
title="Voice Assistant"
>
<MicrophoneIcon className="w-5 h-5" />
</button>
)}
{/* The toggles have been removed. The display of the current state is now shown textually. */}
<div className="hidden sm:flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
<span className="capitalize">{unitSystem}</span>
<span>|</span>
<span>{isDarkMode ? 'Dark' : 'Light'} Mode</span>
</div>
<div className="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
{userProfile ? ( // This ternary was missing a 'null' or alternative rendering path for when 'user' is not present.
<div className="flex items-center space-x-3">
<div className="hidden md:flex items-center space-x-2 text-sm">
<UserIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
{authStatus === 'AUTHENTICATED' ? (
// Use the user object from the new auth system
<span className="font-medium text-gray-700 dark:text-gray-300">
{userProfile.user.email}
</span>
) : (
<span className="font-medium text-gray-500 dark:text-gray-400 italic">
Guest
</span>
)}
</div>
<button
onClick={onOpenProfile}
className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
aria-label="Open my account settings"
title="My Account"
>
<Cog8ToothIcon className="w-5 h-5" />
</button>
{userProfile?.role === 'admin' && (
<Link
to="/admin"
className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
title="Admin Area"
>
<ShieldCheckIcon className="w-5 h-5" />
</Link>
)}
<button
onClick={onSignOut}
className="text-sm font-semibold text-gray-600 hover:text-brand-primary dark:text-gray-300 dark:hover:text-brand-light transition-colors"
>
Logout
</button>
</div>
) : (
// When no user is logged in, show a Login button.
<button
onClick={onOpenProfile}
className="text-sm font-semibold text-gray-600 hover:text-brand-primary dark:text-gray-300 dark:hover:text-brand-light transition-colors"
>
Login
</button>
)}
</div>
</div>
</div>
</header>
</>
);
};
|