Initial commit from remix
This commit is contained in:
gpt-engineer-app[bot]
190
src/components/Header.tsx
Normal file
190
src/components/Header.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Menu, X, User, Plus, Sun, Moon, Globe } from "lucide-react";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { useCart } from "@/contexts/CartContext";
|
||||
import CartSidebar from "@/components/CartSidebar";
|
||||
|
||||
const Header = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
const { user, isAuthenticated, logout } = useAuth();
|
||||
const { language, setLanguage, t } = useLanguage();
|
||||
const { getTotalItems } = useCart();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const toggleTheme = () => {
|
||||
setIsDark(!isDark);
|
||||
document.documentElement.classList.toggle('dark');
|
||||
};
|
||||
|
||||
const handleAuthAction = () => {
|
||||
if (isAuthenticated) {
|
||||
navigate('/dashboard');
|
||||
} else {
|
||||
navigate('/sign-in');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ code: 'es', name: 'ES', flag: '🇪🇸' },
|
||||
{ code: 'en', name: 'EN', flag: '🇺🇸' },
|
||||
{ code: 'fr', name: 'FR', flag: '🇫🇷' }
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center">
|
||||
<img
|
||||
src="https://karibeo.com/desktop/assets/images/logo.png"
|
||||
alt="Karibeo"
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-white hover:text-orange-400 font-medium transition-colors relative py-2"
|
||||
style={{
|
||||
borderBottom: '3px solid #F84525',
|
||||
paddingBottom: '8px'
|
||||
}}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/explore"
|
||||
className="text-white hover:text-orange-400 font-medium transition-colors py-2"
|
||||
>
|
||||
Explore
|
||||
</Link>
|
||||
<Link
|
||||
to="/"
|
||||
className="text-white hover:text-orange-400 font-medium transition-colors py-2"
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Actions */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
{/* Language/Theme Controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-white hover:text-orange-400 rounded-full w-10 h-10 p-0"
|
||||
onClick={toggleTheme}
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</Button>
|
||||
|
||||
<CartSidebar />
|
||||
|
||||
<Button variant="ghost" size="sm" className="text-white hover:text-orange-400 rounded-full w-10 h-10 p-0">
|
||||
<User className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
onClick={handleAuthAction}
|
||||
className="text-white rounded-full px-6 py-2"
|
||||
style={{backgroundColor: '#F84525'}}
|
||||
>
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleLogout}
|
||||
variant="outline"
|
||||
className="rounded-full text-white border-white hover:bg-white hover:text-gray-900"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => navigate('/sign-up')}
|
||||
className="text-white rounded-full px-6 py-2"
|
||||
style={{backgroundColor: '#F84525'}}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Listing
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="md:hidden text-white"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden mt-6 pb-6 bg-white/10 backdrop-blur-md rounded-lg">
|
||||
<nav className="flex flex-col space-y-4 p-6">
|
||||
<Link to="/" className="text-white hover:text-orange-400 font-medium transition-colors">
|
||||
Home
|
||||
</Link>
|
||||
<Link to="/explore" className="text-white hover:text-orange-400 font-medium transition-colors">
|
||||
Explore
|
||||
</Link>
|
||||
<Link to="/" className="text-white hover:text-orange-400 font-medium transition-colors">
|
||||
About
|
||||
</Link>
|
||||
<div className="flex flex-col space-y-3 pt-4 border-t border-white/20">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Button
|
||||
onClick={handleAuthAction}
|
||||
style={{backgroundColor: '#F84525'}}
|
||||
className="text-white"
|
||||
>
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleLogout}
|
||||
variant="outline"
|
||||
className="text-white border-white"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => navigate('/sign-up')}
|
||||
style={{backgroundColor: '#F84525'}}
|
||||
className="text-white"
|
||||
>
|
||||
Add Listing
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user