{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post-hero",
  "title": "Post Hero",
  "description": "An editorial article header with title, summary, categories, byline, date, and an optional image slot.",
  "registryDependencies": [],
  "files": [
    {
      "path": "payload-components/source/components/PostHero/Component.tsx",
      "content": "import React, { type ReactNode } from 'react'\n\nexport type PostHeroProps = {\n  title: string\n  description?: string | null\n  publishedAt?: string | null\n  categories?: readonly string[] | null\n  author?: string | null\n  /** Pass your populated Payload Media or Next Image element, with meaningful alt text. */\n  image?: ReactNode\n  locale?: string\n  id?: string\n  className?: string\n  disableInnerContainer?: boolean\n}\n\n/** Compose in your article template; this is not a Payload layout block. */\nexport function PostHero({\n  title,\n  description,\n  publishedAt,\n  categories,\n  author,\n  image,\n  locale = 'en',\n  id,\n  className,\n  disableInnerContainer = false,\n}: PostHeroProps) {\n  const date = publishedAt ? new Date(publishedAt) : undefined\n  const validDate = date && !Number.isNaN(date.valueOf()) ? date : undefined\n  let dateLabel: string | undefined\n  if (validDate) {\n    const options: Intl.DateTimeFormatOptions = {\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n      timeZone: 'UTC',\n    }\n    try {\n      dateLabel = new Intl.DateTimeFormat(locale, options).format(validDate)\n    } catch {\n      dateLabel = new Intl.DateTimeFormat('en', options).format(validDate)\n    }\n  }\n\n  return (\n    <header\n      id={id}\n      className={['bg-background py-12 text-foreground md:py-20', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={disableInnerContainer ? undefined : 'container mx-auto px-6'}>\n        <div className=\"mx-auto max-w-4xl border-t border-border pt-6\">\n          {categories?.length ? (\n            <div className=\"mb-6 flex flex-wrap gap-3 text-xs font-medium uppercase tracking-eyebrow text-muted-foreground\">\n              {categories.map((category, index) => (\n                <span key={`${category}-${index}`}>{category}</span>\n              ))}\n            </div>\n          ) : null}\n          <h1 className=\"max-w-4xl break-words font-serif text-4xl leading-tight tracking-title md:text-6xl\">\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"mt-6 max-w-2xl text-lg leading-8 text-muted-foreground\">{description}</p>\n          ) : null}\n          {author || validDate ? (\n            <div className=\"mt-8 flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-border pt-5 text-sm\">\n              {author ? <span className=\"font-medium\">{author}</span> : null}\n              {validDate ? (\n                <time className=\"text-muted-foreground\" dateTime={validDate.toISOString()}>\n                  {dateLabel}\n                </time>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n        {image ? (\n          <div className=\"mt-10 overflow-hidden rounded-lg bg-muted [&_img]:h-auto [&_img]:w-full\">\n            {image}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/components/PostHero/Component.tsx"
    }
  ],
  "meta": {
    "payloadComponent": {
      "installCommand": "payload-components add post-hero",
      "postInstall": [],
      "requiresPayloadComponentWrapper": false,
      "supportedTargets": [
        "payload-website-starter",
        "payload-blocks-app"
      ]
    }
  },
  "docs": "File-only article template component. Import PostHero from @/components/PostHero/Component and pass the content explicitly. No Pages or RenderBlocks edits and no generators. Direct install: pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/post-hero.json Optional tracked install in a supported Payload project: payload-components add post-hero.",
  "type": "registry:component"
}