{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-latest",
  "title": "Agency: Latest and careers",
  "description": "News, writing and a role as cards with drawn covers, then the open roles as a ruled list.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json",
    "https://eased.dev/r/badge.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/latest.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"../../badge/badge\";\nimport { latest } from \"./content\";\nimport { NoteCover } from \"./covers\";\nimport { Arrow, Reveal, Section, useHref } from \"./kit\";\n\nconst DATE = new Intl.DateTimeFormat(\"en-GB\", { day: \"numeric\", month: \"short\", year: \"numeric\", timeZone: \"UTC\" });\n\n/**\n * The careers and latest strip: four notes (press, writing, a role) as cards with small drawn\n * covers in the theme's own ink, each linking to its journal or job post, then the open roles as\n * a ruled list that shares one grid, so every place and arrow lines up (rule 103).\n */\nexport function Latest() {\n  const to = useHref();\n  return (\n    <Section id=\"latest\" label={latest.label} className=\"flex flex-col gap-group\">\n      <Reveal>\n        <p className=\"max-w-2xl font-display text-display-3xl font-medium tracking-display text-balance text-text\">{latest.title}</p>\n      </Reveal>\n      <ul className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2 lg:grid-cols-4\">\n        {latest.items.map((item, i) => (\n          <li key={item.title}>\n            <Reveal index={i} className=\"group relative flex flex-col gap-in\">\n              <div className=\"image-ring relative aspect-[3/2] overflow-hidden rounded-panel bg-surface-sunken sm:aspect-square text-text\">\n                <NoteCover art={item.art} />\n              </div>\n              <div className=\"flex flex-col gap-1.5\">\n                <p className=\"flex items-center gap-2 text-ui-sm text-text-muted\">\n                  <Badge tone={item.kind === \"Careers\" ? \"brand\" : \"neutral\"}>{item.kind}</Badge>\n                  <time dateTime={item.date} className=\"tabular-nums\">\n                    {DATE.format(new Date(`${item.date}T00:00:00Z`))}\n                  </time>\n                </p>\n                <h3 className=\"text-ui-md font-medium text-pretty text-text\">\n                  <a href={to(item.href)} className=\"focus-ring rounded-control-xs after:absolute after:inset-0 after:rounded-panel\">\n                    {item.title}\n                  </a>\n                </h3>\n              </div>\n            </Reveal>\n          </li>\n        ))}\n      </ul>\n      {/* The cards' four columns, so the list starts on the second card's edge (rule 101). */}\n      <Reveal className=\"grid gap-x-tiles gap-y-in lg:grid-cols-4\">\n        <h3 id=\"roles\" className=\"scroll-mt-4 text-ui-md font-medium text-text\">\n          {latest.roles.title}\n        </h3>\n        <div className=\"flex flex-col gap-pad-base lg:col-span-3\">\n          <ul className=\"grid grid-cols-[minmax(0,1fr)_auto] border-t border-line-subtle sm:grid-cols-[minmax(0,1fr)_auto_auto]\">\n            {latest.roles.items.map((role) => (\n              <li key={role.title} className=\"group relative col-span-full grid grid-cols-subgrid items-center gap-x-pad-md border-b border-line-subtle py-pad-sm\">\n                <a\n                  href={to(`/careers/${role.slug}`)}\n                  className=\"focus-ring rounded-control-xs text-ui-md text-text after:absolute after:inset-0\"\n                >\n                  {role.title}\n                </a>\n                <span className=\"text-ui text-text-muted max-sm:hidden\">{role.place}</span>\n                <Arrow className=\"text-text-muted\" />\n              </li>\n            ))}\n          </ul>\n          <p className=\"text-ui text-text-secondary\">\n            Write to{\" \"}\n            <a href={latest.roles.link.href} className=\"focus-ring rounded-control-xs font-medium text-text underline decoration-line-strong underline-offset-4 hover-fine:decoration-text\">\n              {latest.roles.link.label}\n            </a>{\" \"}\n            with your work and a few lines about you.\n          </p>\n        </div>\n      </Reveal>\n    </Section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/latest.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}