add qr code for invite link

lib/cannery_web/components/invite_card.ex

@@ -42,6 +42,11 @@ defmodule CanneryWeb.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/cannery_web/views/view_helpers.ex

@@ -74,6 +74,38 @@ defmodule CanneryWeb.ViewHelpers do
 
   def display_emoji(other_emoji), do: other_emoji
 
+  @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)
+      |> 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
+
   @doc """
   Get a random color in `#ffffff` hex format