{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-3",
  "type": "registry:block",
  "title": "Header 3",
  "description": "Header 3 Block with scroll-based backdrop blur animation",
  "dependencies": [
    "payload",
    "next",
    "react",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@uifoundry/style-utils",
    "@uifoundry/media-field",
    "@uifoundry/block-constants",
    "button"
  ],
  "files": [
    {
      "path": "registry/payload/blocks/header/header-3/config.ts",
      "content": "import type { Block } from \"payload\";\nimport {\n  BLOCK_GROUP_HEADERS,\n  BLOCK_SLUG_HEADER_3,\n} from \"@/registry/default/lib/constants/blocks\";\nimport mediaField from \"@/registry/default/lib/fields/media/config\";\n\nexport const Header_3_Block: Block = {\n  slug: BLOCK_SLUG_HEADER_3,\n  interfaceName: \"Header_3_Block\",\n  labels: {\n    singular: \"Header 3\",\n    plural: \"Header 3'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_3/config.ts"
    },
    {
      "path": "registry/payload/blocks/header/header-3/index.tsx",
      "content": "/**\n * Header 3 Component\n *\n * Source: https://tailark.com/r/hero-section-5.json (header.tsx)\n * License: Free Tier\n * Adapted from: Tailark Hero Section 5 - Header Component\n *\n * Modifications:\n * - Integrated with PayloadCMS block system\n * - Replaced hardcoded menuItems with dynamic props from Header_3_Block\n * - Replaced Logo component with Home icon from lucide-react\n * - Added preview prop support for admin panel rendering\n * - Preserved scroll-based backdrop blur animation\n */\n\n\"use client\";\n\nimport Link from \"next/link\";\nimport { Menu, X } from \"lucide-react\";\nimport { Button } from \"@/registry/ui/button\";\nimport React from \"react\";\nimport { useScroll, motion } from \"motion/react\";\nimport { cn } from \"@/registry/default/utils\";\nimport type { Header_3_Block, MediaField as MediaFieldProps } 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_3({\n  preview = false,\n  brandLogo,\n  logoHref,\n  menuItems,\n  actionButtons,\n  ...navProps\n}: { preview?: boolean } & Header_3_Block & ComponentPropsWithRef<\"nav\">) {\n  const [menuState, setMenuState] = React.useState(false);\n  const [scrolled, setScrolled] = React.useState(false);\n  const { scrollYProgress } = useScroll();\n\n  React.useEffect(() => {\n    const unsubscribe = scrollYProgress.on(\"change\", (latest) => {\n      setScrolled(latest > 0.05);\n    });\n    return () => unsubscribe();\n  }, [scrollYProgress]);\n\n  return (\n    <header>\n      <nav\n        data-state={menuState && \"active\"}\n        className={cn(\"fixed z-20 w-full pt-2\", preview && \"relative\")}\n        {...navProps}\n      >\n        <div\n          className={cn(\n            \"mx-auto max-w-7xl rounded-3xl px-6 transition-all duration-300 lg:px-12\",\n            scrolled && \"bg-background/50 backdrop-blur-2xl\"\n          )}\n        >\n          <motion.div\n            key={1}\n            className={cn(\n              \"relative flex flex-wrap items-center justify-between gap-6 py-3 duration-200 lg:gap-0 lg:py-6\",\n              scrolled && \"lg:py-4\"\n            )}\n          >\n            <div className=\"flex w-full items-center justify-between gap-12 lg:w-auto\">\n              {brandLogo && (\n                <Link\n                  href={logoHref}\n                  aria-label=\"home\"\n                  className=\"relative h-8 w-24 lg:w-32\"\n                >\n                  <MediaField\n                    media={brandLogo as MediaFieldProps}\n                    fill\n                    className=\"object-contain object-left\"\n                  />\n                </Link>\n              )}\n\n              <button\n                onClick={() => setMenuState(!menuState)}\n                aria-label={menuState == true ? \"Close Menu\" : \"Open Menu\"}\n                aria-expanded={menuState}\n                aria-controls=\"mobile-menu\"\n                className=\"relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden\"\n              >\n                <Menu className=\"in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200\" />\n                <X className=\"in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200\" />\n              </button>\n\n              <div className=\"hidden lg:block\">\n                <ul className=\"flex gap-8 text-sm\">\n                  {menuItems?.map((item, index) => (\n                    <li key={index}>\n                      <Link\n                        href={item.href}\n                        className=\"text-muted-foreground hover:text-accent-foreground block duration-150\"\n                      >\n                        <span>{item.label}</span>\n                      </Link>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n\n            <div className=\"hidden lg:flex lg:gap-3\">\n              {actionButtons && actionButtons.length > 0 && (\n                <>\n                  {actionButtons.map((button, index) => (\n                    <Button\n                      key={index}\n                      asChild\n                      variant={button.variant}\n                      size=\"sm\"\n                    >\n                      <Link href={button.href}>\n                        <span>{button.label}</span>\n                      </Link>\n                    </Button>\n                  ))}\n                </>\n              )}\n            </div>\n\n            <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              <div className=\"lg:hidden\">\n                <ul className=\"space-y-6 text-base\">\n                  {menuItems?.map((item, index) => (\n                    <li key={index}>\n                      <Link\n                        href={item.href}\n                        className=\"text-muted-foreground hover:text-accent-foreground block duration-150\"\n                      >\n                        <span>{item.label}</span>\n                      </Link>\n                    </li>\n                  ))}\n                </ul>\n\n                {actionButtons && actionButtons.length > 0 && (\n                  <div className=\"mt-6 flex flex-col space-y-3\">\n                    {actionButtons.map((button, index) => (\n                      <Button\n                        key={index}\n                        asChild\n                        variant={button.variant}\n                        size=\"sm\"\n                      >\n                        <Link href={button.href}>\n                          <span>{button.label}</span>\n                        </Link>\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      </nav>\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "src/payload/blocks/Header/Header_3/index.tsx"
    }
  ]
}