sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
12 lines
980 B
HTML
12 lines
980 B
HTML
<div id="confirm-modal" x-data="confirmModal()" x-show="show" x-cloak class="fixed inset-0 z-[9999] flex items-center justify-center" x-transition>
|
|
<div class="absolute inset-0 bg-black/50" @click="cancel()"></div>
|
|
<div class="relative bg-white dark:bg-gray-950 rounded-xl p-6 max-w-sm w-full mx-4 shadow-2xl">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white" x-text="title"></h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2" x-text="message"></p>
|
|
<div class="flex justify-end gap-3 mt-6">
|
|
<button @click="cancel()" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800">Cancel</button>
|
|
<button @click="confirm()" class="px-4 py-2 text-sm font-medium rounded-lg text-white" :class="danger ? 'bg-red-500 hover:bg-red-600' : 'bg-blue-500 hover:bg-blue-600'" x-text="confirmText"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|