WIP Add notification component for flash messages

app/components/notification_component.html.erb

@@ -0,0 +1,39 @@
+<!-- Global notification live region, render this permanently at the end of the document -->
+<div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
+  <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
+    <!--
+      Notification panel, dynamically insert this into the live region when it needs to be displayed
+
+      Entering: "transform ease-out duration-300 transition"
+        From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        To: "translate-y-0 opacity-100 sm:translate-x-0"
+      Leaving: "transition ease-in duration-100"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+    <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flex-shrink-0">
+            <span class="inline-block h-6 w-6 <%= @icon_color_class %>">
+              <%= render "icons/#{@icon_name}" %>
+            </span>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-gray-900"><%= @data[:title] %></p>
+            <p class="mt-1 text-sm text-gray-500"><%= @data[:body] %></p>
+          </div>
+          <div class="ml-4 flex-shrink-0 flex">
+            <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600">
+              <span class="sr-only">Close</span>
+              <!-- Heroicon name: solid/x -->
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/components/notification_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class NotificationComponent < ViewComponent::Base
+  def initialize(type:, data:)
+    @type = type
+    @data = prepare_data(data)
+    @icon_name = icon_name
+    @icon_color_class = icon_color_class
+  end
+
+  def prepare_data(data)
+    case data
+    when Hash
+      data
+    else
+      { title: data }
+    end
+  end
+
+  def icon_name
+    case @type
+    when 'success'
+      'check-circle'
+    when 'error'
+      'alert-octagon'
+    when 'alert'
+      'alert-octagon'
+    else
+      'info'
+    end
+  end
+
+  def icon_color_class
+    case @type
+    when 'success'
+      'text-emerald-500'
+    when 'error'
+      'text-rose-600'
+    when 'alert'
+      'text-rose-600'
+    else
+      'text-gray-400'
+    end
+  end
+end