Header 4

1/**
2 * Header 4 Component
3 *
4 * Source: https://tailark.com/r/hero-section-6.json (nav extracted from main component)
5 * License: Free Tier
6 * Adapted from: Tailark Hero Section 6 - Navigation Component
7 *
8 * Modifications:
9 * - Integrated with PayloadCMS block system
10 * - Replaced hardcoded menuItems with dynamic props from Header_4_Block
11 * - Replaced Logo component with Home icon from lucide-react
12 * - Added preview prop support for admin panel rendering
13 * - Extracted header navigation from full hero component
14 */
15 
16"use client";
17 
18import { Menu, X } from "lucide-react";
19import { Button } from "@/registry/ui/button";
20import Link from "next/link";
21import { useState } from "react";
22import { cn } from "@/registry/default/utils";
23import type {
24	Header_4_Block,
25	MediaField as MediaFieldProps,
26} from "~/payload-types";
27import type { ComponentPropsWithRef } from "react";
28import MediaField from "@/registry/default/lib/fields/media";
29 
30export * from "./config";
31 
32export default function Header_4({
33	preview = false,
34	brandLogo,
35	logoHref,
36	menuItems,
37	actionButtons,
38	...navProps
39}: { preview?: boolean } & Header_4_Block & ComponentPropsWithRef<"nav">) {
40	const [menuState, setMenuState] = useState(false);
41 
42	return (
43		<header className="border-b border-dashed">
44			<nav
45				data-state={menuState && "active"}
46				className={cn(
47					"fixed z-20 w-full bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent",
48					preview && "relative",
49				)}
50				{...navProps}
51			>
52				<div className="m-auto max-w-5xl px-6">
53					<div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
54						<div className="flex w-full items-center justify-between lg:w-auto">
55							{brandLogo && (
56								<Link
57									href={logoHref}
58									aria-label="home"
59									className="relative h-8 w-24 lg:w-32"
60								>
61									<MediaField
62										media={brandLogo as MediaFieldProps}
63										fill
64										className="object-contain object-left"
65									/>
66								</Link>
67							)}
68 
69							<button
70								onClick={() => setMenuState(!menuState)}
71								aria-label={menuState == true ? "Close Menu" : "Open Menu"}
72								aria-expanded={menuState}
73								aria-controls="mobile-menu"
74								className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
75							>
76								<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" />
77// … truncated