clusev/resources/views/livewire/modals/confirm-action.blade.php

40 lines
1.7 KiB
PHP

<div class="p-5 sm:p-6">
<div class="flex items-start gap-3.5">
<span @class([
'grid h-10 w-10 shrink-0 place-items-center rounded-md border',
'border-offline/30 bg-offline/10 text-offline' => $danger,
'border-accent/30 bg-accent/10 text-accent-text' => ! $danger,
])>
<x-icon :name="$icon ?: ($danger ? 'alert' : 'activity')" class="h-5 w-5" />
</span>
<div class="min-w-0 flex-1">
<h2 class="font-display text-base font-semibold text-ink">{{ $heading }}</h2>
<p class="mt-1 text-sm leading-relaxed text-ink-2">{{ $body }}</p>
@if ($auditTarget)
<p class="mt-2 truncate font-mono text-[11px] text-ink-4">{{ $auditTarget }}</p>
@endif
</div>
</div>
<div class="mt-6 flex items-center justify-end gap-2">
<button
type="button"
wire:click="$dispatch('closeModal')"
class="inline-flex min-h-11 items-center rounded-md border border-line bg-inset px-4 text-sm text-ink-2 transition-colors hover:bg-raised hover:text-ink"
>Abbrechen</button>
<button
type="button"
wire:click="confirm"
wire:loading.attr="disabled"
@class([
'inline-flex min-h-11 items-center gap-2 rounded-md px-4 font-display text-sm font-semibold uppercase tracking-wide transition-colors disabled:opacity-50',
'bg-offline text-void hover:bg-offline/90' => $danger,
'bg-accent text-void hover:bg-accent-bright' => ! $danger,
])
>
<x-icon :name="$icon ?: ($danger ? 'alert' : 'activity')" class="h-4 w-4" />
{{ $confirmLabel }}
</button>
</div>
</div>