Features — Tabbed Deep-Dive

Installation

Variants

Schema

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

interface DeepDiveAngle {
  id: string
  label: string
  headline: string
  body: string
  constraint: string
  rows: { name: string; detail: string }[]
}

Files installed (2)

• src/app/components/blocks/feature-tabbed-deepdive/feature-tabbed-deepdive.component.ts6.4 kB

  Copy

  // One feature examined from three angles behind tabs, each panel carrying its own
  // explanation, a constraint the reader should know, and a matching detail panel.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { LucideAngularModule, TriangleAlert } 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'
  import {
    UiTabsComponent,
    UiTabsContentComponent,
    UiTabsListComponent,
    UiTabsTriggerComponent,
  } from '@/ui/tabs/tabs.component'
  
  export interface DeepDiveAngle {
    id: string
    label: string
    headline: string
    body: string
    constraint: string
    rows: { name: string; detail: string }[]
  }
  
  // Each angle names its own constraint. A deep-dive that only lists strengths
  // reads as marketing; the constraint is what makes the rest credible.
  const angles: DeepDiveAngle[] = [
    {
      id: 'authoring',
      label: 'Authoring',
      headline: 'A metric is a file, not a setting',
      body: 'Definitions are YAML in your repository. They are reviewed, branched, and reverted with the tools your team already runs, and the history is yours if you leave.',
      constraint: 'Requires someone comfortable opening a pull request. There is no drag-and-drop builder.',
      rows: [
        { name: 'metrics/revenue_net.yml', detail: 'v128' },
        { name: 'metrics/margin.yml', detail: 'v41' },
        { name: 'metrics/pipeline.yml', detail: 'v12' },
      ],
    },
    {
      id: 'execution',
      label: 'Execution',
      headline: 'The planner decides where a query runs',
      body: 'Hot aggregates resolve from materialised tables; everything else falls through to the warehouse. Each result carries the freshness it was served at.',
      constraint: 'Materialised paths are stale between runs by design, and the stamp says so rather than hiding it.',
      rows: [
        { name: 'revenue rollup', detail: 'materialised · 5 min' },
        { name: 'pipeline by stage', detail: 'materialised · 1 hr' },
        { name: 'raw event search', detail: 'live query' },
      ],
    },
    {
      id: 'governance',
      label: 'Governance',
      headline: 'Access is decided at query time',
      body: 'Scope resolves from your identity provider on every request, and each evaluation is written to an append-only log you can export.',
      constraint: 'Group changes propagate on your directory’s sync interval, not instantly.',
      rows: [
        { name: 'EMEA analyst', detail: 'region-scoped' },
        { name: 'Finance lead', detail: 'full ledger' },
        { name: 'Contractor', detail: 'no payroll' },
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-feature-tabbed-deepdive, [ui-feature-tabbed-deepdive]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
      UiTabsComponent,
      UiTabsContentComponent,
      UiTabsListComponent,
      UiTabsTriggerComponent,
    ],
    template: `
      <section data-slot="feature-tabbed-deepdive" [class]="rootClass">
        <div class="mx-auto max-w-5xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">In depth</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">The metric layer, from three angles</h2>
          </div>
  
          <ui-tabs [value]="activeTab()" (valueChange)="setActiveTab($event)" class="mt-10">
            <ui-tabs-list variant="segmented" class="flex-nowrap overflow-x-auto">
              @for (angle of allAngles; track angle.id) {
                <button ui-tabs-trigger [value]="angle.id" variant="segmented">
                  {{ angle.label }}
                </button>
              }
            </ui-tabs-list>
  
            @for (angle of allAngles; track angle.id) {
              <ui-tabs-content [value]="angle.id" class="mt-6">
                <div class="grid min-h-[18rem] gap-6 sm:grid-cols-[1.3fr_1fr]">
                  <div>
                    <h3 class="text-xl font-semibold tracking-tight text-balance">{{ angle.headline }}</h3>
                    <p class="text-muted-foreground mt-3 leading-relaxed">{{ angle.body }}</p>
  
                    <ui-separator class="my-5" />
  
                    <p class="flex items-start gap-2.5 text-sm">
                      <lucide-icon [img]="TriangleAlert" class="text-muted-foreground mt-0.5 size-4 shrink-0" aria-hidden="true" />
                      <span class="text-muted-foreground">{{ angle.constraint }}</span>
                    </p>
                  </div>
  
                  <div ui-card class="self-start">
                    <div ui-card-content class="p-0">
                      <div class="border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs">
                        {{ angle.label }}
                      </div>
                      <ul class="divide-border divide-y">
                        @for (row of angle.rows; track row.name) {
                          <li class="flex items-center justify-between gap-3 px-4 py-2.5">
                            <span class="min-w-0 truncate font-mono text-xs">{{ row.name }}</span>
                            <span class="text-muted-foreground shrink-0 text-xs">{{ row.detail }}</span>
                          </li>
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              </ui-tabs-content>
            }
          </ui-tabs>
  
          <button ui-button variant="outline" class="mt-8">Read the full reference</button>
        </div>
      </section>
    `,
  })
  export class UiFeatureTabbedDeepdiveComponent {
    protected readonly TriangleAlert = TriangleAlert
    protected readonly allAngles = angles
  
    @Input() set defaultTab(v: string) {
      if (angles.some((a) => a.id === v)) this.activeTab.set(v)
    }
    @Input('class') className?: string
  
    readonly activeTab = signal('authoring')
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  
    setActiveTab(value: string): void {
      if (angles.some((a) => a.id === value)) this.activeTab.set(value)
    }
  }
  

• src/app/components/blocks/feature-tabbed-deepdive/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/feature-tabbed-deepdive.json