120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import React from "react";
|
|
import { View } from "../types";
|
|
import icon from "../assets/icone.svg";
|
|
|
|
interface HeaderProps {
|
|
user: { name: string; store: string };
|
|
currentView: View;
|
|
onNavigate: (view: View) => void;
|
|
cartCount: number;
|
|
onCartClick: () => void;
|
|
onLogout?: () => void;
|
|
}
|
|
|
|
const Header: React.FC<HeaderProps> = ({
|
|
user,
|
|
onNavigate,
|
|
cartCount,
|
|
onCartClick,
|
|
onLogout,
|
|
}) => {
|
|
return (
|
|
<header className="sticky top-0 z-40 w-full bg-white/95 lg:bg-white/80 backdrop-blur-md border-b border-slate-200 safe-area-top">
|
|
<div className="max-w-[1600px] mx-auto px-3 lg:px-6 h-14 lg:h-16 flex items-center justify-between">
|
|
<div
|
|
className="flex items-center space-x-2 lg:space-x-3 cursor-pointer group"
|
|
onClick={() => onNavigate(View.HOME_MENU)}
|
|
>
|
|
<div className="bg-[#ffffff] p-1.5 lg:p-2 rounded-xl transition-transform group-hover:scale-105">
|
|
<img src={icon} alt="Jurunense Icon" className="w-5 h-5 lg:w-6 lg:h-6" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-extrabold text-xs lg:text-base text-[#002147] leading-none tracking-tight">
|
|
<span className="lg:hidden">VendaWeb</span>
|
|
<span className="hidden lg:inline">Platforma VendaWeb</span>
|
|
</span>
|
|
<span className="text-[8px] lg:text-[9px] font-bold text-orange-500 uppercase tracking-[0.2em]">
|
|
Jurunense
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2 lg:space-x-8">
|
|
<div className="hidden lg:flex items-center space-x-4">
|
|
<div className="h-8 w-[1px] bg-slate-200"></div>
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-sm font-bold text-slate-800">
|
|
{user.name}
|
|
</span>
|
|
<span className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
|
|
Filial: {user.store}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2 lg:space-x-4">
|
|
<button
|
|
onClick={onCartClick}
|
|
className="relative p-3 lg:p-2.5 bg-slate-50 text-slate-600 rounded-xl hover:bg-[#002147] hover:text-white transition-all group touch-manipulation"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 lg:w-6 lg:h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
|
|
/>
|
|
</svg>
|
|
{cartCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-1.5 min-w-[22px] h-[22px] bg-orange-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white ring-2 ring-orange-500/20 animate-bounce-slow">
|
|
{cartCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
if (onLogout) {
|
|
onLogout();
|
|
} else {
|
|
onNavigate(View.LOGIN);
|
|
}
|
|
}}
|
|
className="p-3 lg:p-2.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all touch-manipulation"
|
|
title="Sair"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 lg:w-6 lg:h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>{`
|
|
@keyframes bounce-slow {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-3px); }
|
|
}
|
|
.animate-bounce-slow { animation: bounce-slow 2s infinite ease-in-out; }
|
|
`}</style>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|