Packages

observer_web

0.2.8
0.2.8 0.2.7 0.2.6 0.2.5 0.2.4 0.2.3 0.2.2 0.2.1 0.2.0 0.1.12 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0 0.0.3 0.0.2 0.0.1

Observer Web Dashboard for tracing, applications observability, performance metrics, and much more

HexDocs

Current section

Files

Jump to
Readme
25 Versions
7 Dependencies
Dependants
Files
Activity
observer_web lib web components copy_to_clipboard.ex
Raw

lib/web/components/copy_to_clipboard.ex 

defmodule Observer.Web.Components.CopyToClipboard do

  @moduledoc false

  use Observer.Web, :html

  use Phoenix.Component



  attr :id, :string, required: true

  attr :message, :string, required: true



  def content(assigns) do

    ~H"""

    <button

      class="text-gray-500"

      phx-click={JS.dispatch("phx:copy_to_clipboard", detail: %{text: @message, id: @id})}

    >

      <div class="flex gap-1 items-center object-center w-20">

        <div id={"default-message-#{@id}"}>

          <div class="flex items-center gap-0.5 text-gray-900 dark:text-white">

            <svg

              class="w-4 h-4"

              fill="none"

              stroke="currentColor"

              viewBox="0 0 24 24"

              xmlns="http://www.w3.org/2000/svg"

            >

              <path

                stroke-linecap="round"

                stroke-linejoin="round"

                stroke-width="2"

                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"

              >

              </path>

            </svg>

            <span>Copy</span>

          </div>

        </div>

        <div id={"success-message-#{@id}"} hidden>

          <div class="flex items-center gap-0.5 text-gray-900 dark:text-white">

            <svg

              class="w-4 h-4 text-green-500"

              fill="none"

              stroke="currentColor"

              viewBox="0 0 24 24"

              xmlns="http://www.w3.org/2000/svg"

            >

              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">

              </path>

            </svg>

            <span> Copied! </span>

          </div>

        </div>

      </div>

    </button>

    """

  end

end