95 lines
4.3 KiB
TypeScript
95 lines
4.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { ShoppingCartIcon } from './icons/ShoppingCartIcon';
|
|
import { DarkModeToggle } from './DarkModeToggle';
|
|
import { UnitSystemToggle } from './UnitSystemToggle';
|
|
import { Session } from '@supabase/supabase-js';
|
|
import { supabase } from '../services/supabaseClient';
|
|
import { AuthModal } from './AuthModal';
|
|
import { UserIcon } from './icons/UserIcon';
|
|
import { CogIcon } from './icons/CogIcon';
|
|
import { MicrophoneIcon } from './icons/MicrophoneIcon';
|
|
|
|
interface HeaderProps {
|
|
isDarkMode: boolean;
|
|
toggleDarkMode: () => void;
|
|
unitSystem: 'metric' | 'imperial';
|
|
toggleUnitSystem: () => void;
|
|
session: Session | null;
|
|
onOpenProfile: () => void;
|
|
onOpenVoiceAssistant: () => void;
|
|
onSignOut: () => void;
|
|
}
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ isDarkMode, toggleDarkMode, unitSystem, toggleUnitSystem, session, onOpenProfile, onOpenVoiceAssistant, onSignOut }) => {
|
|
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
|
|
|
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">
|
|
{session && (
|
|
<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>
|
|
)}
|
|
<UnitSystemToggle currentSystem={unitSystem} onToggle={toggleUnitSystem} />
|
|
<DarkModeToggle isDarkMode={isDarkMode} onToggle={toggleDarkMode} />
|
|
<div className="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
|
|
{session ? (
|
|
<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" />
|
|
<span className="font-medium text-gray-700 dark:text-gray-300">{session.user.email}</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"
|
|
>
|
|
<CogIcon className="w-5 h-5" />
|
|
</button>
|
|
<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>
|
|
) : (
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => setIsAuthModalOpen(true)}
|
|
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>
|
|
<button
|
|
onClick={() => setIsAuthModalOpen(true)}
|
|
className="px-3 py-1.5 text-sm font-semibold text-white bg-brand-primary hover:bg-brand-secondary rounded-md transition-colors"
|
|
>
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{isAuthModalOpen && supabase && <AuthModal isOpen={isAuthModalOpen} onClose={() => setIsAuthModalOpen(false)} />}
|
|
</>
|
|
);
|
|
}; |