Header 3

1/**
2 * Header 3 Component
3 *
4 * Source: https://tailark.com/r/hero-section-5.json (header.tsx)
5 * License: Free Tier
6 * Adapted from: Tailark Hero Section 5 - Header Component
7 *
8 * Modifications:
9 * - Integrated with PayloadCMS block system
10 * - Replaced hardcoded menuItems with dynamic props from Header_3_Block
11 * - Replaced Logo component with Home icon from lucide-react
12 * - Added preview prop support for admin panel rendering
13 * - Preserved scroll-based backdrop blur animation
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 { useScroll, motion } from "motion/react";
23import { cn } from "@/registry/default/utils";
24import type { Header_3_Block, MediaField as MediaFieldProps } from "~/payload-types";
25import type { ComponentPropsWithRef } from "react";
26import MediaField from "@/registry/default/lib/fields/media";
27 
28export * from "./config";
29 
30export default function Header_3({
31  preview = false,
32  brandLogo,
33  logoHref,
34  menuItems,
35  actionButtons,
36  ...navProps
37}: { preview?: boolean } & Header_3_Block & ComponentPropsWithRef<"nav">) {
38  const [menuState, setMenuState] = React.useState(false);
39  const [scrolled, setScrolled] = React.useState(false);
40  const { scrollYProgress } = useScroll();
41 
42  React.useEffect(() => {
43    const unsubscribe = scrollYProgress.on("change", (latest) => {
44      setScrolled(latest > 0.05);
45    });
46    return () => unsubscribe();
47  }, [scrollYProgress]);
48 
49  return (
50    <header>
51      <nav
52        data-state={menuState && "active"}
53        className={cn("fixed z-20 w-full pt-2", preview && "relative")}
54        {...navProps}
55      >
56        <div
57          className={cn(
58            "mx-auto max-w-7xl rounded-3xl px-6 transition-all duration-300 lg:px-12",
59            scrolled && "bg-background/50 backdrop-blur-2xl"
60          )}
61        >
62          <motion.div
63            key={1}
64            className={cn(
65              "relative flex flex-wrap items-center justify-between gap-6 py-3 duration-200 lg:gap-0 lg:py-6",
66              scrolled && "lg:py-4"
67            )}
68          >
69            <div className="flex w-full items-center justify-between gap-12 lg:w-auto">
70              {brandLogo && (
71                <Link
72                  href={logoHref}
73                  aria-label="home"
74                  className="relative h-8 w-24 lg:w-32"
75                >
76                  <MediaField
77// … truncated