Add recommended apps for RS

app/views/services/remotestorage/show.html.erb

@@ -31,6 +31,106 @@
     </p>
   </section>
 
+  <section>
+    <h3>Recommended Apps</h3>
+    <div data-controller="tabs"
+         data-tabs-active-tab-class="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
+         data-tabs-inactive-tab-class="text-gray-500 hover:text-gray-700"
+         class="mb-12">
+      <select data-action="tabs#change" data-tabs-target="select"
+              class="block w-full mb-8 sm:hidden">
+        <option>Productivity</option>
+        <option>Bookmarks</option>
+        <option>Reading</option>
+        <option>File sharing</option>
+        <option>Learning</option>
+      </select>
+      <ul class="hidden sm:flex list-reset mb-8 border-gray-200 border-b">
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Productivity
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Bookmarks
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Reading
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            File sharing
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
+          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
+            Learning
+          </a>
+        </li>
+      </ul>
+
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Hyperdraft",
+          description: "Create text notes and (optionally) turn them into a website",
+          icon_path: "/img/app_icons/hyperdraft.png",
+          links: [
+            ["Web App", "https://hyperdraft.rosano.ca"],
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Papiers",
+          description: "A simple but powerful note-taking app",
+          icon_path: "/img/app_icons/papiers.png",
+          links: [
+            ["Web App", "https://papiers.gitlab.io"],
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Webmarks",
+          description: "Archive your bookmarks in your remote storage",
+          icon_path: "/img/app_icons/webmarks.png",
+          links: [
+            ["Web App", "https://webmarks.5apps.com"],
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Pétrolette",
+          description: "A news aggregator that syncs with your remote storage",
+          icon_path: "/img/app_icons/petrolette.png",
+          links: [
+            ["Web App", "https://petrolette.space"],
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Sharesome",
+          description: "Quickly and easily share files from your remote storage",
+          icon_path: "/img/app_icons/sharesome.png",
+          links: [
+            ["Web App", "https://sharesome.5apps.com"],
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Kommit",
+          description: "Create flashcards and learn them with spaced-repetition",
+          icon_path: "/img/app_icons/kommit.png",
+          links: [
+            ["Web App", "https://kommit.rosano.ca"],
+          ]
+        ) %>
+      </div>
     </div>
   </section>
 <% end %>