Custom Header

1"use client";
2 
3import type { CustomHeaderBlock } from "~/payload-types";
4import RenderBlocks from "@/registry/default/components/RenderBlocks";
5import { useEffect, useState } from "react";
6import { cn } from "@/registry/default/utils";
7import { blockComponents } from "./blocks";
8import { Menu, X } from "lucide-react";
9import { BLOCK_SLUG_HEADER_MENU_ITEMS } from "@/registry/default/lib/constants/blocks";
10 
11export default function Header({
12	preview = false,
13	items,
14}: {
15	preview?: boolean;
16} & CustomHeaderBlock) {
17	const [menuState, setMenuState] = useState(false);
18	const [isScrolled, setIsScrolled] = useState(false);
19 
20	useEffect(() => {
21		const handleScroll = () => {
22			setIsScrolled(window.scrollY > 50);
23		};
24		window.addEventListener("scroll", handleScroll);
25		return () => {
26			window.removeEventListener("scroll", handleScroll);
27		};
28	});
29 
30	return (
31		<header>
32			<nav
33				data-state={menuState && "active"}
34				id="header"
35				className={cn("fixed z-20 w-full px-2", preview && "relative")}
36			>
37				<div
38					className={cn(
39						"mx-auto mt-4 mb-8 max-w-6xl px-6 transition-all duration-300 lg:px-12",
40						isScrolled &&
41						"bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5",
42					)}
43				>
44					<div className="relative flex flex-wrap items-center justify-between gap-6 px-4 py-3 lg:gap-0 lg:py-4">
45						<div className="flex w-full items-center justify-between">
46							<div className="flex justify-between lg:hidden lg:w-auto">
47								<button
48									onClick={() => setMenuState(!menuState)}
49									aria-label={menuState == true ? "Close Menu" : "Open Menu"}
50									className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
51								>
52									<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" />
53									<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" />
54								</button>
55							</div>
56							<div className="relative flex items-center">
57								<RenderBlocks
58									blocks={(items ?? []).filter((i) => i.alignment === "left")}
59									blockComponents={blockComponents}
60									className={cn("w-full")}
61								/>
62							</div>
63							<div className="relative flex items-center">
64								<RenderBlocks
65									blocks={(items ?? []).filter((i) => i.alignment === "center")}
66// … truncated