Header 2

1"use client";
2 
3import { Menu, X } from "lucide-react";
4import Link from "next/link";
5import { useEffect, useState, type ComponentPropsWithRef } from "react";
6import type { Header_2_Block, MediaField as MediaFieldProps } from "~/payload-types";
7import { cn } from "@/registry/default/utils";
8import { Button } from "@/registry/ui/button";
9import MediaField from "@/registry/default/lib/fields/media";
10 
11export * from "./config";
12 
13export default function Header_2({
14	preview = false,
15	brandLogo,
16	logoHref = "/",
17	menuItems,
18	actionButtons,
19	...navProps
20}: { preview?: boolean } & Header_2_Block & ComponentPropsWithRef<"nav">) {
21	const [menuState, setMenuState] = useState(false);
22	const [isScrolled, setIsScrolled] = useState(false);
23 
24	useEffect(() => {
25		const handleScroll = () => {
26			setIsScrolled(window.scrollY > 50);
27		};
28		window.addEventListener("scroll", handleScroll);
29		return () => {
30			window.removeEventListener("scroll", handleScroll);
31		};
32	});
33 
34	return (
35		<header>
36			<nav
37				data-state={menuState && "active"}
38				id="header"
39				className={cn(
40					"fixed z-20 w-full border-b transition-colors duration-150",
41					isScrolled && "bg-background/50 backdrop-blur-3xl",
42					preview && "relative",
43				)}
44				{...navProps}
45			>
46				<div className="mx-auto max-w-5xl px-6 transition-all duration-300">
47					<div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
48						<div className="flex w-full items-center justify-between gap-12 lg:w-auto">
49							{brandLogo && (
50								<Link
51									href={logoHref}
52									aria-label="home"
53									className="relative h-8 w-24 lg:w-32"
54								>
55									<MediaField
56										media={brandLogo as MediaFieldProps}
57										fill
58										className="object-contain object-left"
59									/>
60								</Link>
61							)}
62 
63							<button
64								onClick={() => setMenuState(!menuState)}
65								aria-label={menuState == true ? "Close Menu" : "Open Menu"}
66								className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
67							>
68								<Menu className="m-auto size-6 duration-200 in-data-[state=active]:scale-0 in-data-[state=active]:rotate-180 in-data-[state=active]:opacity-0" />
69								<X className="absolute inset-0 m-auto size-6 scale-0 -rotate-180 opacity-0 duration-200 in-data-[state=active]:scale-100 in-data-[state=active]:rotate-0 in-data-[state=active]:opacity-100" />
70							</button>
71 
72							<div className="hidden lg:block">
73// … truncated