Header 5

1/**
2 * Header 5 Component
3 *
4 * Source: https://tailark.com/r/hero-section-4.json (header.tsx)
5 * License: Free Tier
6 * Adapted from: Tailark Hero Section 4 - Header Component
7 *
8 * Modifications:
9 * - Integrated with PayloadCMS block system
10 * - Replaced hardcoded menuItems with dynamic props from Header_5_Block
11 * - Replaced Logo component with Home icon from lucide-react
12 * - Added preview prop support for admin panel rendering
13 * - Preserved backdrop blur and border styling
14 */
15 
16"use client";
17 
18import Link from "next/link";
19import { Menu, X } from "lucide-react";
20import { Button } from "@/registry/ui/button";
21import React from "react";
22import { cn } from "@/registry/default/utils";
23import type {
24	Header_5_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_5({
33	preview = false,
34	brandLogo,
35	logoHref,
36	menuItems,
37	actionButtons,
38	...navProps
39}: { preview?: boolean } & Header_5_Block & ComponentPropsWithRef<"nav">) {
40	const [menuState, setMenuState] = React.useState(false);
41 
42	return (
43		<header className="border-b">
44			<nav
45				data-state={menuState && "active"}
46				className={cn(
47					"bg-background/50 fixed z-20 w-full",
48					preview && "relative",
49				)}
50				{...navProps}
51			>
52				<div className="mx-auto max-w-6xl px-6 transition-all duration-300">
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 gap-12 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