Header 1

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_1_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_1({
14	preview = false,
15	brandLogo,
16	logoHref = "/",
17	menuItems,
18	actionButtons,
19	...navProps
20}: { preview?: boolean } & Header_1_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("fixed z-20 w-full px-2", preview && "relative")}
40				{...navProps}
41			>
42				<div
43					className={cn(
44						"mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12",
45						isScrolled &&
46						"bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5",
47					)}
48				>
49					<div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
50						<div className="flex w-full justify-between lg:w-auto">
51							{brandLogo && (
52								<Link
53									href={logoHref}
54									aria-label="home"
55									className="relative h-8 w-24 lg:w-32"
56								>
57									<MediaField
58										media={brandLogo as MediaFieldProps}
59										fill
60										className="object-contain object-left"
61									/>
62								</Link>
63							)}
64 
65							<button
66								onClick={() => setMenuState(!menuState)}
67								aria-label={menuState == true ? "Close Menu" : "Open Menu"}
68								className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
69							>
70								<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" />
71								<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" />
72							</button>
73 
74// … truncated