feat: atuializacao de layout
This commit is contained in:
yagostn
parent
a3655d2068
commit
4e9b743928
5 changed files with 233 additions and 59 deletions
|
|
@ -30,6 +30,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (isAccountDropdownOpen) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest('.relative')) {
|
||||
setIsAccountDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [isAccountDropdownOpen]);
|
||||
|
||||
const getLinks = () => {
|
||||
if (!user) return [];
|
||||
|
||||
|
|
@ -213,16 +226,14 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
onClick={() =>
|
||||
setIsAccountDropdownOpen(!isAccountDropdownOpen)
|
||||
}
|
||||
className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors shadow-md"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold hover:bg-brand-gold hover:text-white transition-colors">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div className="text-left hidden lg:block">
|
||||
<p className="text-xs text-gray-500">Olá, bem-vindo(a)</p>
|
||||
<p className="text-sm font-medium text-brand-black">
|
||||
Entrar / Cadastrar
|
||||
</p>
|
||||
<p className="text-xs font-semibold text-gray-700">Entrar/Cadastrar</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
|
@ -234,7 +245,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
|
||||
<User size={32} className="text-white" />
|
||||
</div>
|
||||
<p className="text-white/90 text-sm mb-1">Olá, bem-vindo(a)</p>
|
||||
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
|
||||
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
|
|
@ -267,14 +279,159 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Button */}
|
||||
<div className="md:hidden flex items-center">
|
||||
{/* Mobile Buttons */}
|
||||
<div className="md:hidden flex items-center gap-2">
|
||||
{user ? (
|
||||
<>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
|
||||
className="h-10 w-10 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent active:ring-brand-gold transition-all shadow-md"
|
||||
>
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt="Avatar"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Profile Preview Dropdown Mobile */}
|
||||
{isAccountDropdownOpen && (
|
||||
<div className="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
|
||||
{/* Header com foto e info */}
|
||||
<div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center relative">
|
||||
<div className="w-20 h-20 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-4 border-white/30 overflow-hidden">
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
|
||||
<p className="text-white/90 text-sm mb-1">{user.email}</p>
|
||||
<span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
|
||||
{getRoleLabel()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="p-4 space-y-2 bg-gray-50">
|
||||
{/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
|
||||
{(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsEditProfileModalOpen(true);
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-[#492E61]/10 flex items-center justify-center group-hover:bg-[#492E61]/20 transition-colors">
|
||||
<User size={20} className="text-[#492E61]" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
|
||||
<p className="text-xs text-gray-500">Atualize suas informações</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Configurações - Apenas para CEO e Business Owner */}
|
||||
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
onNavigate("settings");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center group-hover:bg-gray-300 transition-colors">
|
||||
<Settings size={20} className="text-gray-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Configurações</p>
|
||||
<p className="text-xs text-gray-500">Preferências da conta</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Sair */}
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-red-50 transition-colors text-left group border-t border-gray-200 mt-2 pt-4"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
||||
<LogOut size={20} className="text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-red-600">Sair da Conta</p>
|
||||
<p className="text-xs text-red-400">Desconectar do sistema</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu Hamburguer - Apenas para usuários logados */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="text-brand-black hover:text-brand-gold p-2"
|
||||
>
|
||||
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
|
||||
className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold shadow-md"
|
||||
>
|
||||
<User size={20} />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Popup Mobile */}
|
||||
{isAccountDropdownOpen && (
|
||||
<div className="absolute right-0 top-full mt-3 w-72 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
|
||||
{/* Header com ícone */}
|
||||
<div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
|
||||
<User size={32} className="text-white" />
|
||||
</div>
|
||||
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
|
||||
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
<div className="p-5 space-y-3 bg-gray-50">
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("login");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="secondary"
|
||||
className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
ENTRAR
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("register");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="primary"
|
||||
className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
Cadastre-se agora
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export const CalendarPage: React.FC = () => {
|
|||
{/* Header */}
|
||||
<div className="mb-4 sm:mb-6 md:mb-8 flex flex-col gap-3 sm:gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#492E61] mb-1 sm:mb-2">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B8D033] mb-1 sm:mb-2">
|
||||
Minha Agenda
|
||||
</h1>
|
||||
<p className="text-xs sm:text-sm md:text-base text-gray-600">
|
||||
|
|
@ -170,14 +170,6 @@ export const CalendarPage: React.FC = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button className="flex items-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 bg-[#492E61] text-white rounded-xl hover:bg-[#3a2450] transition-colors shadow-lg text-sm sm:text-base">
|
||||
<Plus size={18} className="sm:w-5 sm:h-5" />
|
||||
<span className="hidden xs:inline">Novo Evento</span>
|
||||
<span className="xs:hidden">Novo</span>
|
||||
</button>
|
||||
<button className="p-2 sm:p-2.5 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
|
||||
<Filter size={18} className="sm:w-5 sm:h-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -230,22 +230,22 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
<input
|
||||
type="text"
|
||||
placeholder="Nome"
|
||||
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="E-mail"
|
||||
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Telefone"
|
||||
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Mensagem"
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
|
||||
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
|
||||
></textarea>
|
||||
<button
|
||||
className="w-full px-6 py-2.5 text-sm text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
|
||||
|
|
|
|||
|
|
@ -61,6 +61,15 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|||
{/* Right Side - Form */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
|
||||
<div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
|
||||
{/* Logo Mobile */}
|
||||
<div className="lg:hidden flex justify-center mb-6">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Photum Formaturas"
|
||||
className="h-16 w-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center lg:text-left">
|
||||
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Bem-vindo de volta</span>
|
||||
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
|
||||
|
|
@ -127,15 +136,15 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo Users Quick Select */}
|
||||
{/* Demo Users Quick Select - Melhorado para Mobile */}
|
||||
<div className="mt-6 sm:mt-10 pt-6 sm:pt-10 border-t border-gray-200">
|
||||
<p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
|
||||
<div className="space-y-2">
|
||||
{availableUsers.map(user => (
|
||||
<button
|
||||
key={user.id}
|
||||
onClick={() => fillCredentials(user.email)}
|
||||
className="flex flex-col items-start p-3 sm:p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
|
||||
className="w-full flex items-center justify-between p-3 sm:p-4 border-2 rounded-xl hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.01] active:scale-[0.99]"
|
||||
style={{ borderColor: '#e5e7eb' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#B9CF33';
|
||||
|
|
@ -146,9 +155,16 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<span className="text-xs sm:text-sm font-bold text-gray-900">{user.name}</span>
|
||||
<span className="text-[10px] sm:text-xs uppercase tracking-wide mt-0.5 sm:mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
|
||||
<span className="text-[10px] sm:text-xs text-gray-500 mt-0.5 sm:mt-1 truncate w-full">{user.email}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm sm:text-base font-bold text-gray-900 truncate">{user.name}</span>
|
||||
<span className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#B9CF33', color: '#fff' }}>{getRoleLabel(user.role)}</span>
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm text-gray-500 truncate block">{user.email}</span>
|
||||
</div>
|
||||
<svg className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -149,6 +149,15 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
{/* Right Side - Form */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
|
||||
<div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
|
||||
{/* Logo Mobile */}
|
||||
<div className="lg:hidden flex justify-center mb-6">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Photum Formaturas"
|
||||
className="h-16 w-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center lg:text-left">
|
||||
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Comece agora</span>
|
||||
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
|
||||
|
|
|
|||
Loading…
Reference in a new issue