Resources — Category Grid

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface ResourceEntry {
  title: string
  kind: string
  read: string
}

interface ResourceCategory {
  icon: typeof BookOpen
  label: string
  blurb: string
  entries: ResourceEntry[]
}

Files installed (2)

• src/app/components/blocks/resources-category-grid/resources-category-grid.component.ts5.8 kB

  Copy

  // Resource library grouped into categories, each card listing its three most recent
  // entries with kind and read time, over a link to the full archive. Port of the
  // React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowUpRight, BookOpen, FileText, GraduationCap, LucideAngularModule, Wrench } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface ResourceEntry {
    title: string
    kind: string
    read: string
  }
  
  interface ResourceCategory {
    icon: typeof BookOpen
    label: string
    blurb: string
    entries: ResourceEntry[]
  }
  
  const categories: ResourceCategory[] = [
    {
      icon: BookOpen,
      label: 'Guides',
      blurb: 'Step-by-step for the work you do once.',
      entries: [
        { title: 'A reconciliation checklist for your first close', kind: 'Guide', read: '6 min' },
        { title: 'Connecting Snowflake with a read-only role', kind: 'Guide', read: '4 min' },
        { title: 'Mapping SCIM groups to row-level scope', kind: 'Guide', read: '8 min' },
      ],
    },
    {
      icon: FileText,
      label: 'Engineering',
      blurb: 'How it is built and why it is built that way.',
      entries: [
        { title: 'Why we version definitions, not dashboards', kind: 'Essay', read: '9 min' },
        { title: 'Query planning against three warehouses', kind: 'Deep dive', read: '14 min' },
        { title: 'What our audit log actually records', kind: 'Reference', read: '5 min' },
      ],
    },
    {
      icon: GraduationCap,
      label: 'Benchmarks',
      blurb: 'Numbers from real rollouts, not projections.',
      entries: [
        { title: 'Close speed across 240 finance teams', kind: 'Benchmark', read: '11 min' },
        { title: 'Where self-serve analytics actually fails', kind: 'Research', read: '7 min' },
        { title: 'Warehouse cost before and after budgets', kind: 'Benchmark', read: '9 min' },
      ],
    },
    {
      icon: Wrench,
      label: 'Operations',
      blurb: 'Running it after the rollout finishes.',
      entries: [
        { title: 'Handling a restatement mid-quarter', kind: 'Runbook', read: '6 min' },
        { title: 'Alert routing that people do not mute', kind: 'Runbook', read: '5 min' },
        { title: 'Quarterly access review in 20 minutes', kind: 'Runbook', read: '4 min' },
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-resources-category-grid, [ui-resources-category-grid]',
    standalone: true,
    // The block renders its own root <section>: keep the host out of layout.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="resources-category-grid" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="flex flex-wrap items-end justify-between gap-6">
            <div class="max-w-2xl">
              <span ui-badge variant="secondary">Library</span>
              <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Everything we have written down</h2>
            </div>
            <button ui-button variant="outline">Browse the archive</button>
          </div>
  
          <div class="mt-10 grid gap-4 sm:grid-cols-2">
            @for (category of categories; track category.label) {
              <div ui-card>
                <div ui-card-content class="p-6">
                  <div class="flex items-center gap-3">
                    <span
                      class="border-border text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-lg border"
                      aria-hidden="true"
                    >
                      <lucide-icon [img]="category.icon" class="size-4" />
                    </span>
                    <div class="min-w-0">
                      <p class="text-sm font-semibold">{{ category.label }}</p>
                      <p class="text-muted-foreground truncate text-xs">{{ category.blurb }}</p>
                    </div>
                  </div>
  
                  <ui-separator class="my-4" />
  
                  <ul class="space-y-1">
                    @for (entry of category.entries; track entry.title) {
                      <li>
                        <a
                          href="#"
                          class="hover:bg-muted focus-visible:ring-ring group flex items-start gap-3 rounded-md p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                        >
                          <span class="min-w-0 flex-1">
                            <span class="block text-sm leading-snug">{{ entry.title }}</span>
                            <span class="text-muted-foreground mt-0.5 block font-mono text-xs">
                              {{ entry.kind }} · {{ entry.read }}
                            </span>
                          </span>
                          <lucide-icon
                            [img]="ArrowUpRight"
                            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"
                          />
                        </a>
                      </li>
                    }
                  </ul>
                </div>
              </div>
            }
          </div>
        </div>
      </section>
    `,
  })
  export class UiResourcesCategoryGridComponent {
    protected readonly ArrowUpRight = ArrowUpRight
    protected readonly categories = categories
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/resources-category-grid/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/resources-category-grid.json