Quick Actions

Installation

Variants

Files installed (2)

• src/app/components/blocks/quick-actions/quick-actions.component.ts2.6 kB

  Copy

  // Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with
  // QuickActionItem — swap the anchor for a routerLink when you need SPA routing.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowUpRight, LucideAngularModule, type LucideIconData } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiSectionCardComponent } from '@/ui/section-card/section-card.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-quick-actions, [ui-quick-actions]',
    standalone: true,
    // React renders the root SectionCard itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [UiSectionCardComponent],
    template: `
      <ui-section-card
        data-slot="quick-actions"
        [class]="rootClass"
        [title]="title"
        [description]="description"
        contentClassName="flex flex-col gap-2"
      >
        <ng-content />
      </ui-section-card>
    `,
  })
  export class UiQuickActionsComponent {
    @Input() title = 'Quick Actions'
    @Input() description?: string
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn(this.className)
    }
  }
  
  /** One shortcut row. Needs no router adapter: paste your own routerLink element in
   *  place of the anchor when you need SPA routing — you own this file. */
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-quick-action-item',
    standalone: true,
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule],
    template: `
      <a data-slot="quick-action-item" [attr.href]="href" [class]="hostClass">
        @if (icon) {
          <span
            class="bg-primary/10 text-primary inline-flex size-9 shrink-0 items-center justify-center rounded-lg p-2 transition-colors"
          >
            <lucide-icon [img]="icon" class="size-4" />
          </span>
        }
        <span class="flex-1 text-sm font-medium">{{ label }}</span>
        <lucide-icon
          [img]="ArrowUpRight"
          class="text-muted-foreground size-4 opacity-0 transition-colors duration-200 group-hover:opacity-100"
        />
      </a>
    `,
  })
  export class UiQuickActionItemComponent {
    protected readonly ArrowUpRight = ArrowUpRight
  
    @Input() label = ''
    @Input() icon?: LucideIconData | null
    @Input() href?: string
    @Input('class') className?: string
  
    get hostClass(): string {
      return cn(
        'hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-colors duration-200',
        this.className,
      )
    }
  }
  

• src/app/components/blocks/quick-actions/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/quick-actions.json