{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "personal-hero",
  "title": "Personal Hero",
  "description": "Narrow personal intro with status, lede links, and meta.",
  "files": [
    {
      "path": "registry/default/blocks/personal-hero.tsx",
      "content": "const CONTENT = {\n  name: \"Your Name\",\n  tagline: \"Designer-engineer building calm software.\",\n  location: \"Somewhere on Earth\",\n  status: \"shipping\" as const,\n  /** Set to your portrait path (e.g. `/me.jpg`) after install. */\n  imageSrc: \"\",\n  imageAlt: \"\",\n  ledeLinks: [\n    { label: \"studio\", href: \"https://example.com\" },\n    { label: \"writing\", href: \"/writing\" },\n  ],\n  ledeBefore: \"Shipping at \",\n  ledeBetween: \", writing at \",\n  ledeAfter: \".\",\n}\n\ntype StatusKind = \"shipping\" | \"working\" | \"dormant\"\n\nconst statusCopy: Record<StatusKind, string> = {\n  shipping: \"shipping\",\n  working: \"working\",\n  dormant: \"dormant\",\n}\n\nconst statusDot: Record<StatusKind, string> = {\n  shipping: \"bg-emerald-500\",\n  working: \"bg-muted-foreground\",\n  dormant: \"bg-muted-foreground/50\",\n}\n\nexport function PersonalHero({\n  name = CONTENT.name,\n  tagline = CONTENT.tagline,\n  location = CONTENT.location,\n  status = CONTENT.status,\n  imageSrc = CONTENT.imageSrc,\n  imageAlt = CONTENT.imageAlt,\n  ledeLinks = CONTENT.ledeLinks,\n  ledeBefore = CONTENT.ledeBefore,\n  ledeBetween = CONTENT.ledeBetween,\n  ledeAfter = CONTENT.ledeAfter,\n  className,\n}: {\n  name?: string\n  tagline?: string\n  location?: string\n  status?: StatusKind | null\n  imageSrc?: string\n  imageAlt?: string\n  ledeLinks?: Array<{ label: string; href: string; external?: boolean }>\n  ledeBefore?: string\n  ledeBetween?: string\n  ledeAfter?: string\n  className?: string\n} = {}) {\n  const portrait = imageSrc.trim()\n\n  return (\n    <section\n      className={className ?? \"mx-auto max-w-[640px] pt-14 sm:pt-20\"}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex min-w-0 items-start gap-4\">\n          {portrait ? (\n            <img\n              src={portrait}\n              alt={imageAlt.trim() || name}\n              width={72}\n              height={72}\n              className=\"mt-1 size-18 shrink-0 rounded-full border border-border-subtle bg-muted object-cover\"\n            />\n          ) : null}\n          <h1 className=\"min-w-0 pt-1 text-[2rem] font-medium tracking-tight text-foreground sm:text-[2.5rem]\">\n            {name}\n          </h1>\n        </div>\n        {status ? <StatusDot status={status} /> : null}\n      </div>\n\n      <p className=\"mt-5 max-w-[36ch] text-[15px] leading-[1.65] text-foreground\">\n        {tagline}\n      </p>\n\n      {ledeLinks.length > 0 ? (\n        <p className=\"mt-1.5 max-w-[42ch] text-[14px] leading-[1.65] text-muted-foreground\">\n          {ledeBefore}\n          {ledeLinks.map((link, i) => {\n            const external =\n              link.external ?? /^https?:\\/\\//.test(link.href)\n            return (\n              <span key={link.href}>\n                {i > 0 ? ledeBetween : null}\n                <a\n                  href={link.href}\n                  {...(external\n                    ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n                    : {})}\n                  className=\"text-foreground underline decoration-border-subtle underline-offset-[3px] transition-colors hover:decoration-foreground\"\n                >\n                  {link.label}\n                </a>\n              </span>\n            )\n          })}\n          {ledeAfter}\n        </p>\n      ) : null}\n\n      <div className=\"mt-5 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[11.5px] text-muted-foreground\">\n        <span>{location}</span>\n      </div>\n    </section>\n  )\n}\n\nfunction StatusDot({ status }: { status: StatusKind }) {\n  return (\n    <span\n      className=\"inline-flex items-center gap-1.5 pt-2 font-mono text-[11px] text-muted-foreground\"\n      aria-label={`Status: ${statusCopy[status]}`}\n    >\n      <span className=\"relative inline-flex h-[7px] w-[7px] shrink-0\">\n        <span\n          className={`absolute inset-0 rounded-full ${statusDot[status]} ${\n            status === \"shipping\" ? \"animate-ping opacity-60\" : \"opacity-0\"\n          }`}\n          aria-hidden\n        />\n        <span\n          className={`relative h-[7px] w-[7px] rounded-full ${statusDot[status]}`}\n          aria-hidden\n        />\n      </span>\n      {statusCopy[status]}\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/personal-hero.tsx"
    }
  ],
  "type": "registry:block"
}