88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import type { MouseEventHandler } from "react";
|
|
|
|
type Theme = "dark" | "light";
|
|
|
|
type SiteHeaderProps = {
|
|
menuOpen: boolean;
|
|
theme: Theme;
|
|
onMenuToggle: () => void;
|
|
onThemeToggle: () => void;
|
|
onNavClick: MouseEventHandler<HTMLElement>;
|
|
};
|
|
|
|
export default function SiteHeader({ menuOpen, theme, onMenuToggle, onThemeToggle, onNavClick }: SiteHeaderProps) {
|
|
return (
|
|
<header className="site-header" aria-label="Primary navigation">
|
|
<a className="brand" href="#top" aria-label="Bay Area Email Services home">
|
|
<span className="brand-mark" aria-hidden="true">
|
|
<svg viewBox="0 0 40 32" role="img">
|
|
<path d="M3 5.5h34v21H3z"></path>
|
|
<path d="m4.5 7 15.5 11.5L35.5 7"></path>
|
|
<path d="m4.5 25 11.2-9.2"></path>
|
|
<path d="m35.5 25-11.2-9.2"></path>
|
|
</svg>
|
|
</span>
|
|
<span>
|
|
<strong>Bay Area</strong>
|
|
<span>Email Services</span>
|
|
</span>
|
|
</a>
|
|
|
|
<button
|
|
className="menu-toggle"
|
|
type="button"
|
|
aria-expanded={menuOpen}
|
|
aria-controls="nav-menu"
|
|
onClick={onMenuToggle}
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<b>Menu</b>
|
|
<span className="sr-only">Open menu</span>
|
|
</button>
|
|
|
|
<nav id="nav-menu" className={`nav-menu${menuOpen ? " is-open" : ""}`} onClick={onNavClick}>
|
|
<a href="#services">Services</a>
|
|
<a href="#infrastructure">Infrastructure</a>
|
|
<a href="#pricing">Pricing</a>
|
|
<a href="#migration">Migration</a>
|
|
<a href="#faq">Resources</a>
|
|
<a href="#assessment">Support</a>
|
|
</nav>
|
|
|
|
<div className="header-actions">
|
|
<a className="phone-link" href="tel:+13617658400" aria-label="Call Bay Area Email Services at 361 765 8400">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"></path>
|
|
</svg>
|
|
Call (361) 765-8400
|
|
</a>
|
|
<button
|
|
className="theme-toggle"
|
|
type="button"
|
|
aria-pressed={theme === "light"}
|
|
aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
|
|
onClick={onThemeToggle}
|
|
>
|
|
<svg className="theme-icon theme-icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2.5"></path>
|
|
<path d="M12 19.5V22"></path>
|
|
<path d="m4.9 4.9 1.8 1.8"></path>
|
|
<path d="m17.3 17.3 1.8 1.8"></path>
|
|
<path d="M2 12h2.5"></path>
|
|
<path d="M19.5 12H22"></path>
|
|
<path d="m4.9 19.1 1.8-1.8"></path>
|
|
<path d="m17.3 6.7 1.8-1.8"></path>
|
|
</svg>
|
|
<svg className="theme-icon theme-icon-moon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"></path>
|
|
</svg>
|
|
</button>
|
|
<a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|