Clipboard

<div class="flex flex-col gap-4">
  <div class="flex items-end gap-2">
    <div>
      <label for="default_clipboard" class="form__label mb-1">Label for clipboard</label>
      <input id="default_clipboard" type="text" class="max-w-80 form__field" value="Copy this!" disabled readonly autocomplete="off">
    </div>
    <%= render Ui::Clipboard::Component.new(value: "Copy this!", id: "clipboard_empty") do |clipboard| %>
      <%= clipboard.with_trigger(default: Ui::Btn::Component.new(variant: :primary).with_content("Copy"), success: Ui::Btn::Component.new(variant: :primary).with_content("Copied!")) %>
    <% end %>
  </div>

  <div class="flex items-baseline gap-1">
    <p>Any content to copy</p>
    <%= render Ui::Clipboard::Component.new(value: "Any content to copy", id: "clipboard_tooltip") do |clipboard| %>
      <%= clipboard.with_trigger(
        default: "Copy text",
        class: "link",
        success: "Copy text",
        tooltip_default: "Click me to copy",
        tooltip_success: "Successfully copied!",
        tooltip_placement: "bottom"
      ) %>
    <% end %>
  </div>
</div>