ConfirmModal.razor 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @if (IsOpen)
  2. {
  3. <div class="fixed inset-0 z-50 flex items-center justify-center"
  4. data-testid="@($"{BaseTestId}")">
  5. <!-- Backdrop -->
  6. <div
  7. class="absolute inset-0 bg-black/60"
  8. data-testid="@($"{BaseTestId}-backdrop")"
  9. @onclick="Close">
  10. </div>
  11. <!-- Modal -->
  12. <div class="relative z-10 w-full max-w-md rounded border border-zinc-800 bg-zinc-900 p-4 shadow-lg"
  13. data-testid="@($"{BaseTestId}-container")">
  14. <div class="mb-3 text-lg font-semibold text-zinc-100"
  15. data-testid="@($"{BaseTestId}-title")">
  16. @Title
  17. </div>
  18. <div class="mb-4 text-sm text-zinc-300"
  19. data-testid="@($"{BaseTestId}-content")">
  20. @ChildContent
  21. </div>
  22. <div class="flex justify-end gap-2">
  23. <button
  24. data-testid="@($"{BaseTestId}-cancel")"
  25. class="px-3 py-1 text-sm rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition"
  26. @onclick="Close">
  27. Cancel
  28. </button>
  29. <button
  30. data-testid="@($"{BaseTestId}-confirm")"
  31. class="px-3 py-1 text-sm rounded text-white transition @ConfirmClass"
  32. @onclick="Confirm">
  33. @ConfirmText
  34. </button>
  35. </div>
  36. </div>
  37. </div>
  38. }
  39. @code {
  40. [Parameter] public bool IsOpen { get; set; }
  41. [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
  42. [Parameter] [EditorRequired] public string Title { get; set; } = default!;
  43. [Parameter] public string ConfirmText { get; set; } = "Confirm";
  44. [Parameter] public string ConfirmClass { get; set; } = "bg-emerald-600 hover:bg-emerald-500";
  45. [Parameter] public RenderFragment? ChildContent { get; set; }
  46. [Parameter] [EditorRequired] public EventCallback OnConfirm { get; set; }
  47. [Parameter] public string? TestIdPrefix { get; set; }
  48. // Centralized test id base
  49. private string BaseTestId =>
  50. string.IsNullOrWhiteSpace(TestIdPrefix)
  51. ? "confirm-modal"
  52. : $"{TestIdPrefix}-confirm-modal";
  53. async Task Close()
  54. {
  55. IsOpen = false;
  56. await IsOpenChanged.InvokeAsync(false);
  57. }
  58. async Task Confirm()
  59. {
  60. await OnConfirm.InvokeAsync();
  61. await Close();
  62. }
  63. }