| 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 |
|
|
