{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-4",
  "type": "registry:block",
  "title": "Header 4",
  "description": "Header 4 Block with dashed border and light background",
  "dependencies": [
    "payload",
    "next",
    "react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@uifoundry/style-utils",
    "@uifoundry/media-field",
    "@uifoundry/block-constants",
    "button"
  ],
  "files": [
    {
      "path": "registry/payload/blocks/header/header-4/config.ts",
      "content": "import type { Block } from \"payload\";\nimport {\n  BLOCK_GROUP_HEADERS,\n  BLOCK_SLUG_HEADER_4,\n} from \"@/registry/default/lib/constants/blocks\";\nimport mediaField from \"@/registry/default/lib/fields/media/config\";\n\nexport const Header_4_Block: Block = {\n  slug: BLOCK_SLUG_HEADER_4,\n  interfaceName: \"Header_4_Block\",\n  labels: {\n    singular: \"Header 4\",\n    plural: \"Header 4's\",\n  },\n  admin: {\n    group: BLOCK_GROUP_HEADERS,\n  },\n  fields: [\n    {\n      type: \"collapsible\",\n      label: \"Brand Logo\",\n      fields: [\n        mediaField({\n          name: \"brandLogo\",\n          label: \"Logo Image\",\n        }),\n        {\n          name: \"logoHref\",\n          label: \"Logo Link (href)\",\n          type: \"text\",\n          required: true,\n          defaultValue: \"/\",\n        },\n      ],\n    },\n    {\n      type: \"collapsible\",\n      label: \"Menu Items\",\n      fields: [\n        {\n          name: \"menuItems\",\n          labels: {\n            singular: \"Menu Item\",\n            plural: \"Menu Items\",\n          },\n          type: \"array\",\n          required: true,\n          minRows: 0,\n          maxRows: 10,\n          defaultValue: [\n            {\n              label: \"Features\",\n              href: \"/features\",\n            },\n            {\n              label: \"Solution\",\n              href: \"/solution\",\n            },\n            {\n              label: \"Pricing\",\n              href: \"/pricing\",\n            },\n            {\n              label: \"About\",\n              href: \"/about\",\n            },\n          ],\n          fields: [\n            {\n              name: \"label\",\n              label: \"Label\",\n              type: \"text\",\n              required: true,\n            },\n            {\n              name: \"href\",\n              label: \"Href\",\n              type: \"text\",\n              required: true,\n              admin: {\n                placeholder: \"/features | #features\",\n              },\n            },\n          ],\n        },\n      ],\n    },\n    {\n      type: \"collapsible\",\n      label: \"Action Buttons\",\n      fields: [\n        {\n          name: \"actionButtons\",\n          labels: {\n            singular: \"Action Button\",\n            plural: \"Action Buttons\",\n          },\n          type: \"array\",\n          minRows: 0,\n          maxRows: 3,\n          defaultValue: [\n            {\n              label: \"Login\",\n              href: \"/auth/sign-in\",\n              variant: \"outline\",\n            },\n            {\n              label: \"Sign Up\",\n              href: \"/auth/sign-up\",\n              variant: \"default\",\n            },\n          ],\n          fields: [\n            {\n              name: \"label\",\n              label: \"Button Label\",\n              type: \"text\",\n              required: true,\n            },\n            {\n              name: \"href\",\n              label: \"Button Link (href)\",\n              type: \"text\",\n              required: true,\n            },\n            {\n              name: \"variant\",\n              label: \"Button Variant\",\n              type: \"select\",\n              required: true,\n              defaultValue: \"default\",\n              options: [\n                { label: \"Default\", value: \"default\" },\n                { label: \"Outline\", value: \"outline\" },\n                { label: \"Ghost\", value: \"ghost\" },\n              ],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n",
      "type": "registry:file",
      "target": "src/payload/blocks/Header/Header_4/config.ts"
    },
    {
      "path": "registry/payload/blocks/header/header-4/index.tsx",
      "content": "/**\n * Header 4 Component\n *\n * Source: https://tailark.com/r/hero-section-6.json (nav extracted from main component)\n * License: Free Tier\n * Adapted from: Tailark Hero Section 6 - Navigation Component\n *\n * Modifications:\n * - Integrated with PayloadCMS block system\n * - Replaced hardcoded menuItems with dynamic props from Header_4_Block\n * - Replaced Logo component with Home icon from lucide-react\n * - Added preview prop support for admin panel rendering\n * - Extracted header navigation from full hero component\n */\n\n\"use client\";\n\nimport { Menu, X } from \"lucide-react\";\nimport { Button } from \"@/registry/ui/button\";\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/utils\";\nimport type {\n\tHeader_4_Block,\n\tMediaField as MediaFieldProps,\n} from \"~/payload-types\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport MediaField from \"@/registry/default/lib/fields/media\";\n\nexport * from \"./config\";\n\nexport default function Header_4({\n\tpreview = false,\n\tbrandLogo,\n\tlogoHref,\n\tmenuItems,\n\tactionButtons,\n\t...navProps\n}: { preview?: boolean } & Header_4_Block & ComponentPropsWithRef<\"nav\">) {\n\tconst [menuState, setMenuState] = useState(false);\n\n\treturn (\n\t\t<header className=\"border-b border-dashed\">\n\t\t\t<nav\n\t\t\t\tdata-state={menuState && \"active\"}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed z-20 w-full bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent\",\n\t\t\t\t\tpreview && \"relative\",\n\t\t\t\t)}\n\t\t\t\t{...navProps}\n\t\t\t>\n\t\t\t\t<div className=\"m-auto max-w-5xl px-6\">\n\t\t\t\t\t<div className=\"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\">\n\t\t\t\t\t\t<div className=\"flex w-full items-center justify-between lg:w-auto\">\n\t\t\t\t\t\t\t{brandLogo && (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={logoHref}\n\t\t\t\t\t\t\t\t\taria-label=\"home\"\n\t\t\t\t\t\t\t\t\tclassName=\"relative h-8 w-24 lg:w-32\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<MediaField\n\t\t\t\t\t\t\t\t\t\tmedia={brandLogo as MediaFieldProps}\n\t\t\t\t\t\t\t\t\t\tfill\n\t\t\t\t\t\t\t\t\t\tclassName=\"object-contain object-left\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonClick={() => setMenuState(!menuState)}\n\t\t\t\t\t\t\t\taria-label={menuState == true ? \"Close Menu\" : \"Open Menu\"}\n\t\t\t\t\t\t\t\taria-expanded={menuState}\n\t\t\t\t\t\t\t\taria-controls=\"mobile-menu\"\n\t\t\t\t\t\t\t\tclassName=\"relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<div className=\"hidden lg:block\">\n\t\t\t\t\t\t\t\t<ul className=\"flex gap-8 text-sm\">\n\t\t\t\t\t\t\t\t\t{menuItems?.map((item, index) => (\n\t\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground hover:text-accent-foreground block duration-150\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{item.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"hidden lg:flex lg:gap-3\">\n\t\t\t\t\t\t\t{actionButtons && actionButtons.length > 0 && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{actionButtons.map((button, index) => (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\t\t\tvariant={button.variant}\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Link href={button.href}>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{button.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div id=\"mobile-menu\" className=\"bg-background absolute top-[125%] z-10 mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 in-data-[state=active]:block md:flex-nowrap lg:m-0 lg:w-fit lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent\">\n\t\t\t\t\t\t\t<div className=\"lg:hidden\">\n\t\t\t\t\t\t\t\t<ul className=\"space-y-6 text-base\">\n\t\t\t\t\t\t\t\t\t{menuItems?.map((item, index) => (\n\t\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground hover:text-accent-foreground block duration-150\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{item.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\n\t\t\t\t\t\t\t\t{actionButtons && actionButtons.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"mt-6 flex flex-col space-y-3\">\n\t\t\t\t\t\t\t\t\t\t{actionButtons.map((button, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\t\t\t\tvariant={button.variant}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Link href={button.href}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{button.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</nav>\n\t\t</header>\n\t);\n}\n",
      "type": "registry:component",
      "target": "src/payload/blocks/Header/Header_4/index.tsx"
    }
  ]
}