File size: 1,777 Bytes
88211d3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | defmodule PlausibleWeb.Live.Components.PrimaModal do
@moduledoc false
use PlausibleWeb, :component
alias Prima.Modal
attr :id, :string, required: true
attr :use_portal?, :boolean, default: Mix.env() not in [:test, :ce_test]
slot :inner_block, required: true
def modal(assigns) do
~H"""
<Modal.modal portal={@use_portal?} id={@id}>
<Modal.modal_overlay
transition_enter={{"ease-out duration-300", "opacity-0", "opacity-100"}}
transition_leave={{"ease-in duration-200", "opacity-100", "opacity-0"}}
class="fixed inset-0 z-[9999] bg-gray-500/75 dark:bg-gray-800/75"
/>
<div class="fixed inset-0 z-[9999] w-screen overflow-y-auto sm:pt-[10vmin]">
<div class="flex min-h-full items-end justify-center p-4 sm:items-start sm:p-0">
<Modal.modal_panel
id={@id <> "-panel"}
class="relative overflow-hidden rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl sm:w-full sm:max-w-lg"
transition_enter={
{"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100"}
}
transition_leave={
{"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
}
>
{render_slot(@inner_block)}
</Modal.modal_panel>
</div>
</div>
</Modal.modal>
"""
end
slot :inner_block, required: true
def modal_title(assigns) do
~H"""
<Modal.modal_title as={&h2/1} class="text-lg font-semibold text-gray-900 dark:text-gray-100">
{render_slot(@inner_block)}
</Modal.modal_title>
"""
end
end
|