'use client';
import React from 'react';
import { Button, buttonVariants } from '@/components/ui/button';
import { cn } from '@/utilities/ui';
import { MenuToggleIcon } from '@/components/ui/menu-toggle-icon';
import { useScroll } from '@/components/ui/use-scroll';
import { createPortal } from 'react-dom';
export function Header() {
const [open, setOpen] = React.useState(false);
const scrolled = useScroll(10);
const links = [
{
label: 'Features',
href: '#',
},
{
label: 'Pricing',
href: '#',
},
{
label: 'About',
href: '#',
},
];
React.useEffect(() => {
if (open) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => {
document.body.style.overflow = '';
};
}, [open]);
return (
);
}
type MobileMenuProps = React.ComponentProps<'div'> & {
open: boolean;
};
function MobileMenu({ open, children, className, ...props }: MobileMenuProps) {
if (!open || typeof window === 'undefined') return null;
return createPortal(
,
document.body,
);
}
export const WordmarkIcon = (props: React.ComponentProps<"svg">) => (
);