/* Shared components: logo, header, footer, icons */
const ARMark = ({ size = 28 }) => (
);
const Logo = ({ compact = false }) => (
{!compact && (
AR Communications
Gabriola, BC
)}
);
const NavArrow = ({ size = 14 }) => (
);
const PlusIcon = ({ size = 12 }) => (
);
const Header = () => {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const links = [
{ label: "Services", href: "#services", num: "01" },
{ label: "Work", href: "#work", num: "02" },
{ label: "About", href: "#about", num: "03" },
{ label: "Contact", href: "#contact", num: "04" },
];
return (
);
};
const ColumnLabel = ({ num, children }) => (
{num}
{children}
);
Object.assign(window, { ARMark, Logo, NavArrow, PlusIcon, Header, ColumnLabel });