Add links to example searches

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -21,6 +21,10 @@ article a:hover {
     font-weight: bold;
 }
 
+a {
+    padding: var(--links-padding);
+}
+
 input {
     outline: none;
 }

apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex

@@ -39,14 +39,14 @@ defmodule ComponentsGuideWeb.ResearchController do
   defp load_results(query) when is_binary(query) do
     # Spec.clear_search_cache()
     [
-      content_tag(:article, [
-        h2("HTML spec"),
-        Spec.search_for(:whatwg_html_spec, query) |> present_results()
-      ]),
       content_tag(:article, [
         h2("Can I Use"),
         Spec.search_for(:caniuse, query) |> present_results()
       ]),
+      content_tag(:article, [
+        h2("HTML spec"),
+        Spec.search_for(:whatwg_html_spec, query) |> present_results()
+      ]),
       content_tag(:article, [
         h2("HTML ARIA"),
         Spec.search_for(:html_aria_spec, query) |> present_results()

apps/components_guide_web/lib/components_guide_web/templates/research/index.html.eex

@@ -6,16 +6,16 @@
     <form role=search action="/research" class="flex h-full pt-8 px-2 items-center">
       <input type=text name=q placeholder="Search" class="w-full py-1 px-2 bg-white text-black text-xl" value="<%= @query %>">
     </form>
+    <ul class="list-none flex pt-4" style="--links-padding: 1em">
+      <li><%= link("form", to: "?q=form") %>
+      <li><%= link("button", to: "?q=button") %>
+      <li><%= link("transition", to: "?q=transition") %>
+    </ul>
   </section>
 </header>
 
 <div class="bg-white py-16">
   <div class="container px-6">
-    <h1>
-      Results for
-      <strong><%= @query %></strong>:
-    </h1>
-    <%#= raw @results %>
     <%= @results %>
   </div>
 </div>