add qr code for invite link

lib/memex_web/components/invite_card.ex

@@ -33,6 +33,11 @@ defmodule MemexWeb.Components.InviteCard do
         </h2>
       <% end %>
 
+      <.qr_code
+        content={Routes.user_registration_url(Endpoint, :new, invite: @invite.token)}
+        filename={@invite.name}
+      />
+
       <div class="flex flex-row flex-wrap justify-center items-center">
         <code
           id={"code-#{@invite.id}"}

lib/memex_web/views/view_helpers.ex

@@ -63,4 +63,36 @@ defmodule MemexWeb.ViewHelpers do
     <% end %>
     """
   end
+
+  @doc """
+  Displays content in a QR code as a base64 encoded PNG
+  """
+  @spec qr_code_image(String.t()) :: String.t()
+  @spec qr_code_image(String.t(), width :: non_neg_integer()) :: String.t()
+  def qr_code_image(content, width \\ 384) do
+    img_data =
+      content
+      |> EQRCode.encode()
+      |> EQRCode.png(width: width, background_color: <<39, 39, 42>>, color: <<255, 255, 255>>)
+      |> Base.encode64()
+
+    "data:image/png;base64," <> img_data
+  end
+
+  @doc """
+  Creates a downloadable QR Code element
+  """
+
+  attr :content, :string, required: true
+  attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
+  attr :image_class, :string, default: "w-64 h-max"
+  attr :width, :integer, default: 384, doc: "width of png to generate"
+
+  def qr_code(assigns) do
+    ~H"""
+    <a href={qr_code_image(@content)} download={@filename <> ".png"}>
+      <img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
+    </a>
+    """
+  end
 end