Initial commit

resources/views/components/jetstream/danger-button.blade.php

@@ -0,0 +1,37 @@
+@php
+    // Determine the wire target from wire:click or use explicit wire:target if provided
+    $wireTarget = null;
+
+    if ($attributes->has('wire:target')) {
+        $wireTarget = $attributes->get('wire:target');
+    } else {
+        // Look for wire:click variants (wire:click, wire:click.prevent, etc.)
+        foreach ($attributes->getAttributes() as $key => $value) {
+            if (str_starts_with($key, 'wire:click')) {
+                // Skip $dispatch, $set, $toggle etc. as they don't create loading states
+                if (!str_starts_with(trim($value), '$')) {
+                    $wireTarget = $value;
+                    break;
+                }
+            }
+        }
+    }
+@endphp
+
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center justify-center px-4 py-2 bg-theme-danger-dark border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest shadow-md hover:shadow-sm hover:bg-theme-danger focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent active:bg-theme-danger disabled:opacity-25 transition']) }}>
+    @if(!$attributes->has('no-spinner') && $wireTarget)
+        <span class="relative flex items-center justify-center w-full">
+            <span wire:loading wire:target="{{ $wireTarget }}" class="absolute flex items-center justify-center">
+                <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            </span>
+            <span wire:loading.class="opacity-0" wire:target="{{ $wireTarget }}" class="inline-flex items-center">
+                {{ $slot }}
+            </span>
+        </span>
+    @else
+        {{ $slot }}
+    @endif
+</button>