Tastival UI Design

Import

import {
  AlertDialogComponent,
  AlertDialogTriggerComponent,
  AlertDialogContentComponent,
  AlertDialogHeaderComponent,
  AlertDialogFooterComponent,
  AlertDialogTitleComponent,
  AlertDialogDescriptionComponent,
  AlertDialogActionComponent,
  AlertDialogCancelComponent,
} from '@tastival.net/ui';

@Component({
  imports: [
    AlertDialogComponent,
    AlertDialogTriggerComponent,
    AlertDialogContentComponent,
    AlertDialogHeaderComponent,
    AlertDialogFooterComponent,
    AlertDialogTitleComponent,
    AlertDialogDescriptionComponent,
    AlertDialogActionComponent,
    AlertDialogCancelComponent,
  ],
})
export class ExampleComponent {}

Usage

<alert-dialog [open]="false" [disabled]="false" className="">
  <alert-dialog-trigger className="underline">Delete</alert-dialog-trigger>
  <alert-dialog-content className="max-w-lg" overlayClassName="bg-black/50">
    <alert-dialog-header className="text-left">
      <alert-dialog-title className="text-lg">Delete item</alert-dialog-title>
      <alert-dialog-description className="text-sm">This cannot be undone.</alert-dialog-description>
    </alert-dialog-header>
    <alert-dialog-footer className="gap-2">
      <alert-dialog-cancel className="">Cancel</alert-dialog-cancel>
      <alert-dialog-action className="">Continue</alert-dialog-action>
    </alert-dialog-footer>
  </alert-dialog-content>
</alert-dialog>