From https://once.com/writebook

app/views/users/_invite.html.erb

@@ -0,0 +1,47 @@
+<div class="flex flex-column align-center gap txt-medium--responsive">
+  <% url = join_url(Current.account.join_code) %>
+
+  <label class="flex flex-column gap full-width txt-align-center">
+    <strong id="invite_label" class="invite-label">Share to invite more people</strong>
+    <span class="flex align-center gap margin-inline">
+      <input type="text" class="input fill-white" id="invite_url" value="<%= url %>" aria-labelledby="invite_label" readonly>
+    </span>
+  </label>
+
+  <div class="flex align-center gap">
+    <div data-controller="dialog" class="flex-inline">
+      <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
+        <%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+        <span class="for-screen-reader">Show join link QR code</span>
+      <% end %>
+
+      <dialog class="dialog panel shadow" data-dialog-target="menu"">
+        <%= qr_code_image(url) %>
+
+        <form method="dialog" class="margin-block-start flex justify-center">
+          <button class="btn">
+            <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Close</span>
+          </button>
+        </form>
+      </dialog>
+    </div>
+
+    <%= button_to_copy_to_clipboard(url) do %>
+      <%= image_tag "copy-paste.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+      <span class="for-screen-reader">Copy join link</span>
+    <% end %>
+
+    <%= web_share_button(url, "Link to join Writebook", "Hit this link to join me in Writebook and start writing.") do %>
+      <%= image_tag "share.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+      <span class="for-screen-reader">Share join link</span>
+    <% end %>
+
+    <% if Current.user.can_administer? %>
+      <%= button_to account_join_code_path, class: "btn btn--regenerate" do %>
+        <%= image_tag "refresh.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+        <span class="for-screen-reader">Regenerate join link</span>
+      <% end %>
+    <% end %>
+  </div>
+</div>