Add recommended apps for Chat/XMPP

app/components/app_info_component.html.erb

@@ -0,0 +1,15 @@
+<div class="flex">
+  <div class="<%= @icon_container_class %>">
+    <%= image_tag(@icon_path, class: 'h-full w-full') %>
+  </div>
+  <div class="flex-1 px-4">
+    <h4 class="sm:pt-2 mb-2 text-lg font-bold"><%= @name %></h4>
+    <p class="leading-snug"><%= @description %></p>
+    <p class="leading-snug flex flex-wrap gap-3">
+      <% @links.each do |link| %>
+        <a href="<%= link[1] %>" target="_blank"
+           class="flex-0 btn-sm btn-gray"><%= link[0] %></a>
+      <% end %>
+    </p>
+  </div>
+</div>

app/components/app_info_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class AppInfoComponent < ViewComponent::Base
+  def initialize(name:, description:, icon_path: , icon_fill_box: false, links: [])
+    @name = name
+    @description = description
+    @icon_path = icon_path
+    @icon_container_class = icon_container_class(icon_fill_box)
+    @links = links
+  end
+
+  def icon_container_class(icon_fill_box)
+    str = "flex-0 h-16 w-16 sm:h-28 sm:w-28 bg-white rounded-3xl overflow-hidden"
+    unless icon_fill_box
+      str += " p-2 border border-gray-200"
+    end
+    str
+  end
+end