60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
|
||
|
|
export const Header = () => {
|
||
|
|
const [isMenuOpen, setMenuOpen] = useState(false);
|
||
|
|
|
||
|
|
const toggleMenu = () => setMenuOpen((prev) => !prev);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className={Styles.wrapper}>
|
||
|
|
<div className={Styles.brand}>
|
||
|
|
<img src="/logo.webp" alt="Logo Hit Communications" className={Styles.logo} />
|
||
|
|
<div>
|
||
|
|
<p className={Styles.title}>Hit Communications</p>
|
||
|
|
<p className={Styles.subtitle}>Servers Manager</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={Styles.actions}>
|
||
|
|
<div className="relative">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={Styles.menuTrigger}
|
||
|
|
aria-haspopup="menu"
|
||
|
|
aria-expanded={isMenuOpen}
|
||
|
|
onClick={toggleMenu}
|
||
|
|
>
|
||
|
|
Opções
|
||
|
|
</button>
|
||
|
|
{isMenuOpen && (
|
||
|
|
<div className={Styles.dropdown} role="menu">
|
||
|
|
<button type="button" className={Styles.dropdownItem}>
|
||
|
|
Adicionar servidor
|
||
|
|
</button>
|
||
|
|
<button type="button" className={Styles.dropdownItem}>
|
||
|
|
Editar perfil
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<button type="button" className={Styles.logoutButton}>
|
||
|
|
Sair
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Styles = {
|
||
|
|
wrapper: "flex items-center justify-between rounded-xl border border-cardBorder bg-card px-6 py-4 shadow-sm",
|
||
|
|
brand: "flex items-center gap-3",
|
||
|
|
logo: "h-10 w-10 object-contain",
|
||
|
|
title: "text-base font-semibold text-text",
|
||
|
|
subtitle: "text-xs uppercase tracking-wide text-text-secondary",
|
||
|
|
actions: "flex items-center gap-3",
|
||
|
|
menuTrigger: "rounded-lg border border-cardBorder bg-white/70 px-4 py-2 text-sm font-medium text-text flex items-center gap-2 hover:bg-white transition-colors",
|
||
|
|
dropdown: "absolute right-0 mt-2 w-44 rounded-lg border border-cardBorder bg-white py-2 shadow-lg",
|
||
|
|
dropdownItem: "w-full px-4 py-2 text-left text-sm text-text-secondary hover:bg-bg hover:text-text transition-colors",
|
||
|
|
logoutButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-hover",
|
||
|
|
};
|