Add QR code icon, button, modal for invites

Using https://excid3.github.io/tailwindcss-stimulus-components/

app/components/modal_component.html.erb

@@ -0,0 +1,15 @@
+<div data-modal-target="container"
+     data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+     class="hidden animate-scale-in fixed inset-0 overflow-y-auto flex items-center justify-center"
+     style="z-index: 9999;">
+  <div class="max-h-screen w-auto max-w-lg relative">
+    <div class="m-1 bg-white rounded shadow">
+      <div class="p-8">
+        <%= content %>
+        <div class="flex justify-end items-center flex-wrap mt-6">
+          <button class="btn-md btn-blue" data-action="click->modal#close">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/components/modal_component.rb

@@ -0,0 +1,2 @@
+class ModalComponent < ViewComponent::Base
+end

app/components/qr_code_modal_component.html.erb

@@ -0,0 +1,6 @@
+<%= render ModalComponent.new do %>
+  <% if @descripton.present? %>
+    <p class="mb-6"><%= @description %></p>
+  <% end %>
+  <p><%= raw @qr_code_svg %></p>
+<% end %>

app/components/qr_code_modal_component.rb

@@ -0,0 +1,24 @@
+require "rqrcode"
+
+class QrCodeModalComponent < ViewComponent::Base
+  def initialize(qr_content:, description: nil)
+    @description = description
+    @qr_code_svg = qr_code_svg(qr_content)
+  end
+
+  private
+
+  def qr_code_svg(content)
+    qr_code = RQRCode::QRCode.new(content)
+    qr_code.as_svg(
+      color: "000",
+      shape_rendering: "crispEdges",
+      module_size: 6,
+      standalone: true,
+      use_path: true,
+      svg_attributes: {
+        class: 'inline-block'
+      }
+    )
+  end
+end