بنية الإشعار المنبثق

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={Corex.Toast.create("layout-toast", "Info", "Client binding", :info, [])}
    class="button ui-size-sm"
  >
    Info
  </.action>
  <.action
    phx-click={Corex.Toast.create("layout-toast", "Success", "Client binding", :success, [])}
    class="button ui-size-sm"
  >
    Success
  </.action>
  <.action
    phx-click={Corex.Toast.create("layout-toast", "Error", "Client binding", :error, [])}
    class="button ui-size-sm"
  >
    Error
  </.action>
</div>

  

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={Corex.Toast.create("layout-toast", "2 seconds", "duration: 2000", :info, duration: 2000)}
    class="button ui-size-sm"
  >
    2s
  </.action>
  <.action
    phx-click={Corex.Toast.create("layout-toast", "5 seconds", "duration: 5000 (default)", :info, duration: 5000)}
    class="button ui-size-sm"
  >
    5s
  </.action>
  <.action
    phx-click={
      Corex.Toast.create("layout-toast", "Persistent", "duration: :infinity", :info, duration: :infinity)
    }
    class="button ui-size-sm"
  >
    Infinity
  </.action>
</div>

  

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={Corex.Toast.create("layout-toast", "No loading", "Default slot", :info, duration: 5000)}
    class="button ui-size-sm"
  >
    No loading
  </.action>
  <.action
    phx-click={
      Corex.Toast.create("layout-toast", "Loading", "loading: true", :info,
        duration: :infinity,
        loading: true
      )
    }
    class="button ui-size-sm"
  >
    Loading
  </.action>
</div>

  

    <.action phx-click="toast_anatomy_redirect" class="button ui-size-sm">
  Toast with redirect
</.action>

def handle_event("toast_anatomy_redirect", _params, socket) do
  {:noreply,
   Corex.Toast.create(
     socket,
     "layout-toast",
     "Saved",
     "Action redirects to this anatomy page.",
     :success,
     id: "toast-anatomy-redirect",
     duration: 30_000,
     action: %{
       label: "Same page",
       class: "button ui-accent ui-size-sm",
       js: JS.patch(~p"/toast/anatomy")
     }
   )}
end

  

    <.action phx-click="toast_anatomy_dismiss" class="button ui-size-sm">
  Toast with Live View JS
</.action>

def handle_event("toast_anatomy_dismiss", _params, socket) do
  {:noreply,
   Corex.Toast.create(
     socket,
     "layout-toast",
     "Dismiss me",
     "Action runs a Phoenix.LiveView.JS command.",
     :info,
     id: "toast-anatomy-dismiss",
     duration: :infinity,
     action: %{
       label: "Dismiss",
       class: "button ui-accent ui-size-sm",
       js: Corex.Toast.dismiss("layout-toast", "toast-anatomy-dismiss")
     }
   )}
end

  

    <.action phx-click="toast_anatomy_custom_label" class="button ui-size-sm">
  Toast with custom label
</.action>

def handle_event("toast_anatomy_custom_label", _params, socket) do
  assigns = %{}

  label = ~H"""
  <.heroicon name="hero-arrow-top-right-on-square" />
  Open
  """

  {:noreply,
   Corex.Toast.create(
     socket,
     "layout-toast",
     "Open docs",
     "Label is rendered from ~H with a heroicon.",
     :info,
     id: "toast-anatomy-custom-label",
     duration: 30_000,
     action: %{
       label: label,
       class: "button ui-accent ui-size-sm",
       js: JS.patch(~p"/toast/anatomy")
     }
   )}
end