{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "braavos-hero",
  "title": "Braavos Hero",
  "description": "A frontend hero block for laravel-braavos-hero content data.",
  "registryDependencies": [
    "@bravo/utils"
  ],
  "files": [
    {
      "path": "registry/laravel-inertia/blocks/braavos-hero.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type BraavosHeroData = {\n  foreground: {\n    title: string;\n    body?: string | null;\n  };\n  background: {\n    image: string;\n    url?: string | null;\n  };\n  settings?: {\n    theme?: \"light\" | \"dark\";\n    width?: \"full\" | \"grid\";\n  };\n};\n\nexport type BraavosHeroProps = {\n  data: BraavosHeroData;\n  className?: string;\n};\n\nconst defaultSettings = {\n  theme: \"light\",\n  width: \"full\",\n} satisfies Required<NonNullable<BraavosHeroData[\"settings\"]>>;\n\nexport function BraavosHero({ data, className }: BraavosHeroProps) {\n  const settings = { ...defaultSettings, ...data.settings };\n  const imageUrl = data.background.url ?? data.background.image;\n  const isDark = settings.theme === \"dark\";\n  const isGridWidth = settings.width === \"grid\";\n\n  return (\n    <section\n      className={cn(\n        \"relative isolate overflow-hidden bg-background\",\n        isGridWidth ? \"mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8\" : \"w-full\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"relative min-h-125 overflow-hidden\",\n          isGridWidth && \"rounded-lg\",\n        )}\n      >\n        <div\n          className=\"absolute inset-0 bg-cover bg-center\"\n          style={{ backgroundImage: `url(${JSON.stringify(imageUrl)})` }}\n        />\n        <div\n          className={cn(\n            \"absolute inset-0\",\n            isDark ? \"bg-zinc-950/68\" : \"bg-white/70\",\n          )}\n        />\n\n        <div className=\"relative flex min-h-125 items-center\">\n          <div className=\"mx-auto w-full max-w-7xl px-6 py-20 sm:px-8 lg:px-10\">\n            <div\n              className={cn(\n                \"max-w-3xl\",\n                isDark ? \"text-white\" : \"text-zinc-950\",\n              )}\n            >\n              <h1 className=\"text-4xl font-semibold tracking-normal text-balance sm:text-5xl lg:text-6xl\">\n                {data.foreground.title}\n              </h1>\n              {data.foreground.body ? (\n                <div\n                  className={cn(\n                    \"mt-6 max-w-2xl text-base leading-8 sm:text-lg [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_h2]:mt-8 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-6 [&_h3]:text-xl [&_h3]:font-semibold [&_li]:pl-1 [&_ol]:mt-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-4 [&_ul]:mt-4 [&_ul]:list-disc [&_ul]:pl-5\",\n                    isDark\n                      ? \"text-zinc-100 [&_a]:text-white\"\n                      : \"text-zinc-700 [&_a]:text-zinc-950\",\n                  )}\n                  dangerouslySetInnerHTML={{ __html: data.foreground.body }}\n                />\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const braavosHeroPreviewData = {\n  foreground: {\n    title: \"Lorem Ipsum\",\n    body: \"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\",\n  },\n  background: {\n    image:\n      \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80\",\n  },\n  settings: {\n    theme: \"dark\",\n    width: \"full\",\n  },\n} satisfies BraavosHeroData;\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}