Allow to copy invitation URLs via button

app/views/invitations/index.html.erb

@@ -3,23 +3,29 @@
 <%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
-      <p>
+      <p class="mb-8">
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-      <table class="mt-12">
-        <thead>
-          <tr>
-            <th>URL</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @invitations_unused.each do |invitation| %>
-            <tr>
-              <td class="font-mono"><%= invitation_url(invitation.token) %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
+      <ul>
+        <% @invitations_unused.each do |invitation| %>
+          <li class="font-mono mb-1 flex gap-1 md:block"
+              data-controller="clipboard">
+            <input type="text" disabled class="md:w-3/4 flex-1"
+                   value="<%= invitation_url(invitation.token) %>"
+                   data-clipboard-target="source" />
+            <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+                    data-clipboard-target="trigger" data-action="clipboard#copy"
+                    title="Copy to clipboard">
+              <span class="content-initial">
+                <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+              <span class="content-active hidden">
+                <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+            </button>
+          </li>
+        <% end %>
+      </ul>
     <% else %>
       <p>
         You do not have any invitations to give away yet. We will notify you,