Resources Teaser Grid

Installation

Variants

Files installed (2)

• src/app/components/blocks/resources-teaser-grid/resources-teaser-grid.component.ts6.2 kB

  Copy

  // Blog and resources teaser: one featured article spanning two columns with kind badge
  // and read time, beside a stacked list of four recent pieces, closing on a view-all
  // link row. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, ArrowUpRight, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
  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'
  
  const featured = {
    kind: 'Engineering',
    title: 'Why we version metric definitions instead of dashboards',
    excerpt:
      'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path.',
    readTime: '9 min read',
    date: 'Feb 18, 2026',
    author: { name: 'Marcus Ellery', role: 'Staff Engineer', initials: 'ME' },
  }
  
  const recent = [
    { kind: 'Guide', title: 'A reconciliation checklist for your first close', readTime: '6 min' },
    { kind: 'Benchmark', title: 'What close speed actually looks like across 240 finance teams', readTime: '11 min' },
    { kind: 'Changelog', title: 'Row-level scoping now evaluates against SCIM groups', readTime: '3 min' },
    { kind: 'Opinion', title: 'Self-serve analytics fails for reasons that are not technical', readTime: '7 min' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-resources-teaser-grid, [ui-resources-teaser-grid]',
    standalone: true,
    // The block renders its own root <section>: keep the host out of layout.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiAvatarComponent,
      UiAvatarFallbackComponent,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="resources-teaser-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">Resources</span>
              <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Notes from the build</h2>
              <p class="text-muted-foreground mt-3 text-lg">
                Engineering write-ups, rollout guides, and the benchmarks behind the claims on this page.
              </p>
            </div>
          </div>
  
          <div class="mt-10 grid gap-4 lg:grid-cols-3">
            <!-- Featured piece spans two columns; the recent list stacks beside it. -->
            <div ui-card class="group lg:col-span-2">
              <div ui-card-content class="flex h-full flex-col p-6 lg:p-8">
                <div class="flex flex-wrap items-center gap-3">
                  <span ui-badge variant="outline">{{ featured.kind }}</span>
                  <span class="text-muted-foreground text-xs">{{ featured.date }} · {{ featured.readTime }}</span>
                </div>
  
                <h3 class="mt-4 text-2xl leading-snug font-semibold tracking-tight text-balance">
                  {{ featured.title }}
                </h3>
                <p class="text-muted-foreground mt-3 max-w-prose leading-relaxed">{{ featured.excerpt }}</p>
  
                <div class="mt-auto flex items-center gap-3 pt-8">
                  <ui-avatar class="size-9">
                    <ui-avatar-fallback class="text-xs">{{ featured.author.initials }}</ui-avatar-fallback>
                  </ui-avatar>
                  <div class="min-w-0">
                    <p class="truncate text-sm font-medium">{{ featured.author.name }}</p>
                    <p class="text-muted-foreground truncate text-xs">{{ featured.author.role }}</p>
                  </div>
                  <button ui-button variant="ghost" size="sm" class="ml-auto">
                    Read
                    <lucide-icon
                      [img]="ArrowUpRight"
                      class="ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
                    />
                  </button>
                </div>
              </div>
            </div>
  
            <div ui-card>
              <div ui-card-content class="p-2">
                <ul>
                  @for (post of recent; track post.title; let last = $last) {
                    <li>
                      <a
                        href="#"
                        class="hover:bg-muted focus-visible:ring-ring block rounded-lg p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                      >
                        <div
                          class="text-muted-foreground flex items-center gap-2 font-mono text-xs tracking-wide uppercase"
                        >
                          <span>{{ post.kind }}</span>
                          <span aria-hidden="true">·</span>
                          <span>{{ post.readTime }}</span>
                        </div>
                        <p class="mt-1.5 text-sm leading-snug font-medium">{{ post.title }}</p>
                      </a>
                    </li>
                    @if (!last) {
                      <ui-separator />
                    }
                  }
                </ul>
              </div>
            </div>
          </div>
  
          <div class="border-border mt-8 flex flex-wrap items-center justify-between gap-4 border-t pt-6">
            <p class="text-muted-foreground text-sm">New writing roughly every other week. No newsletter required.</p>
            <button ui-button variant="outline">
              View all resources
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" />
            </button>
          </div>
        </div>
      </section>
    `,
  })
  export class UiResourcesTeaserGridComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly ArrowUpRight = ArrowUpRight
    protected readonly featured = featured
    protected readonly recent = recent
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

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

  Copy

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