{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "resources-featured-list",
  "title": "Resources — Featured List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/resources-featured-list/resources-featured-list.component.ts",
      "content": "// Editorial resource layout pairing one featured long-read with a numbered list of\n// further reading, each entry carrying its kind, date, and read time. Port of the\n// React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, ArrowUpRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nconst featured = {\n  kind: 'Benchmark',\n  title: 'What close speed actually looks like across 240 finance teams',\n  excerpt:\n    'We asked every customer for their close calendar before and after rollout, then threw out the ones who changed headcount mid-period. What is left is 186 teams and a distribution that is wider than any vendor page admits.',\n  date: 'Mar 04, 2026',\n  read: '11 min',\n  author: { name: 'Anna Reyes', role: 'Data Lead', initials: 'AR' },\n}\n\nconst further = [\n  { title: 'Why we version metric definitions instead of dashboards', kind: 'Essay', date: 'Feb 18', read: '9 min' },\n  { title: 'Query planning against three warehouses at once', kind: 'Deep dive', date: 'Feb 02', read: '14 min' },\n  { title: 'A reconciliation checklist for your first close', kind: 'Guide', date: 'Jan 21', read: '6 min' },\n  {\n    title: 'Self-serve analytics fails for reasons that are not technical',\n    kind: 'Opinion',\n    date: 'Jan 09',\n    read: '7 min',\n  },\n  { title: 'What our audit log actually records, field by field', kind: 'Reference', date: 'Dec 15', read: '5 min' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-resources-featured-list, [ui-resources-featured-list]',\n  standalone: true,\n  // The block renders its own root <section>: keep the host out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"resources-featured-list\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div>\n            <span ui-badge variant=\"secondary\">Reading</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Start here</h2>\n          </div>\n          <button ui-button variant=\"link\" class=\"h-auto p-0 text-sm\">\n            All writing\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-1.5 size-3.5\" />\n          </button>\n        </div>\n\n        <div class=\"mt-10 grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:gap-16\">\n          <div ui-card class=\"group\">\n            <div ui-card-content class=\"flex h-full flex-col p-6 lg:p-8\">\n              <div class=\"flex flex-wrap items-center gap-3\">\n                <span ui-badge variant=\"outline\">{{ featured.kind }}</span>\n                <span class=\"text-muted-foreground text-xs\">{{ featured.date }} · {{ featured.read }}</span>\n              </div>\n              <h3 class=\"mt-4 text-2xl leading-snug font-semibold tracking-tight text-balance\">{{ featured.title }}</h3>\n              <p class=\"text-muted-foreground mt-3 leading-relaxed\">{{ featured.excerpt }}</p>\n\n              <div class=\"mt-auto flex items-center gap-3 pt-8\">\n                <ui-avatar class=\"size-9\">\n                  <ui-avatar-fallback class=\"text-xs\">{{ featured.author.initials }}</ui-avatar-fallback>\n                </ui-avatar>\n                <div class=\"min-w-0\">\n                  <p class=\"truncate text-sm font-medium\">{{ featured.author.name }}</p>\n                  <p class=\"text-muted-foreground truncate text-xs\">{{ featured.author.role }}</p>\n                </div>\n                <button ui-button variant=\"ghost\" size=\"sm\" class=\"ml-auto\">\n                  Read\n                  <lucide-icon\n                    [img]=\"ArrowUpRight\"\n                    class=\"ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          <div>\n            <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Further reading</p>\n            <ol class=\"mt-4\">\n              @for (entry of further; track entry.title; let i = $index; let last = $last) {\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"hover:bg-muted focus-visible:ring-ring group -mx-3 flex items-start gap-4 rounded-lg px-3 py-3 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                  >\n                    <span class=\"text-muted-foreground/70 mt-0.5 shrink-0 font-mono text-xs\">\n                      {{ (i + 1).toString().padStart(2, '0') }}\n                    </span>\n                    <span class=\"min-w-0 flex-1\">\n                      <span class=\"block text-sm leading-snug\">{{ entry.title }}</span>\n                      <span class=\"text-muted-foreground mt-1 block font-mono text-xs\">\n                        {{ entry.kind }} · {{ entry.date }} · {{ entry.read }}\n                      </span>\n                    </span>\n                    <lucide-icon\n                      [img]=\"ArrowUpRight\"\n                      class=\"text-muted-foreground mt-0.5 size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    />\n                  </a>\n                </li>\n                @if (!last) {\n                  <ui-separator />\n                }\n              }\n            </ol>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiResourcesFeaturedListComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly ArrowUpRight = ArrowUpRight\n  protected readonly featured = featured\n  protected readonly further = further\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/resources-featured-list/resources-featured-list.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/resources-featured-list/index.ts",
      "content": "export { UiResourcesFeaturedListComponent } from './resources-featured-list.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/resources-featured-list/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Editorial resource layout pairing one featured long-read with a numbered list of further reading, each entry carrying its kind, date, and read time.",
  "categories": [
    "marketing"
  ]
}