Comparison — Versus Alternatives

Installation

Variants

Schema

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

interface VsAlternativesRow {
  topic: string
  them: string
  us: string
}

Files installed (2)

• src/app/components/blocks/comparison-vs-alternatives/comparison-vs-alternatives.component.ts4.6 kB

  Copy

  // Two-column comparison setting this product against the status quo row by row,
  // each line naming the mechanism rather than scoring the competitor.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, LucideAngularModule } 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'
  
  export interface VsAlternativesRow {
    topic: string
    them: string
    us: string
  }
  
  const defaultRows: VsAlternativesRow[] = [
    {
      topic: 'Where the definition lives',
      them: 'Inside each dashboard, duplicated per team',
      us: 'One file in your repository, with an owner',
    },
    {
      topic: 'How a change is reviewed',
      them: 'Saved in place; the previous version is gone',
      us: 'Pull request with a diff, reviewers, and a revert',
    },
    {
      topic: 'Where access is decided',
      them: 'Per dashboard, re-applied by hand on each new one',
      us: 'Per query, resolved from your identity provider',
    },
    {
      topic: 'What a shared link exposes',
      them: 'Whatever the sender could see',
      us: 'Whatever the recipient is scoped to see',
    },
    {
      topic: 'How cost is controlled',
      them: 'Reconciled from the warehouse invoice, monthly',
      us: 'Budget enforced by the planner, before execution',
    },
    {
      topic: 'What happens if you leave',
      them: 'Definitions stay in the vendor’s format',
      us: 'Definitions and history are already in your repo',
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-comparison-vs-alternatives, [ui-comparison-vs-alternatives]',
    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,
    ],
    template: `
      <section data-slot="comparison-vs-alternatives" [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">How it differs</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Against the way it is usually done</h2>
            <p class="text-muted-foreground mt-3 text-lg">
              Both columns describe a mechanism. Neither is a score, because you can check a mechanism.
            </p>
          </div>
  
          <div ui-card class="mt-10">
            <div ui-card-content class="p-0">
              <div
                class="text-muted-foreground grid grid-cols-1 gap-4 px-6 py-3 text-xs font-medium sm:grid-cols-[1fr_1fr_1fr]"
              >
                <span>Topic</span>
                <span class="hidden sm:block">Typical BI stack</span>
                <span class="hidden sm:block">This approach</span>
              </div>
              <ui-separator />
  
              @for (row of rows; track row.topic; let last = $last) {
                <div class="grid gap-3 px-6 py-4 sm:grid-cols-[1fr_1fr_1fr] sm:gap-4">
                  <p class="text-sm font-medium">{{ row.topic }}</p>
                  <p class="text-muted-foreground text-sm leading-relaxed">
                    <span class="text-muted-foreground/70 mr-1.5 text-xs sm:hidden">Typical:</span>
                    {{ row.them }}
                  </p>
                  <p class="text-sm leading-relaxed">
                    <span class="text-muted-foreground/70 mr-1.5 text-xs sm:hidden">Here:</span>
                    {{ row.us }}
                  </p>
                </div>
                @if (!last) {
                  <ui-separator />
                }
              }
            </div>
          </div>
  
          <div class="mt-6 flex flex-wrap items-center gap-4">
            <button ui-button>
              See it on your own data
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
            </button>
            <p class="text-muted-foreground text-sm">No comparison page survives contact with your warehouse.</p>
          </div>
        </div>
      </section>
    `,
  })
  export class UiComparisonVsAlternativesComponent {
    protected readonly ArrowRight = ArrowRight
  
    @Input() rows: VsAlternativesRow[] = defaultRows
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/comparison-vs-alternatives/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/comparison-vs-alternatives.json