show search preview with hyperscript

src/view/mod.rs

@@ -2,8 +2,7 @@ use maud::{html, Markup, DOCTYPE};
 
 mod icons;
 
-use icons::{magnifying_glass, bird};
+use icons::{bird, magnifying_glass};
-
 
 pub fn skeleton(body: Markup) -> Markup {
     html! {
@@ -21,6 +20,8 @@ pub fn skeleton(body: Markup) -> Markup {
                 link rel="preconnect" href="https://fonts.googleapis.com";
                 link rel="preconnect" href="https://fonts.gstatic.com" crossorigin;
                 link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet";
+                // hyperscript
+                script src="https://unpkg.com/hyperscript.org@0.9.12" defer {}
             }
             body {
                 (body)
@@ -31,8 +32,13 @@ pub fn skeleton(body: Markup) -> Markup {
 
 fn navbar() -> Markup {
     html! {
-        nav class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary fixed z-50 bottom-0 left-0 w-full h-14" {
+        nav class="fixed z-50 bottom-0 left-0 w-full h-14" {
-        // nav class="navbar gap-1 fixed z-50 bottom-0 left-0 w-full border-t border-[rgba(150,150,150,0.5)] bg-base-200 text-base-content" {
+            div id="search-results" class="hidden absolute bottom-14 w-full bg-c-bg text-c-on-bg text-white border-t-4 border-l-4 border-r-4 border-c-primary rounded-tr-md rounded-tl-md" {
+                (inline_definition())
+                (inline_definition())
+                (inline_definition())
+            }
+            div class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary" {
                 div class="table" {
                     a href="/" class="table-cell align-middle h-14 text-center" {
                         (bird("var(--c-on-bg)".into(), 36))
@@ -42,7 +48,18 @@ fn navbar() -> Markup {
                     svg class="absolute z-10 -left-[15px] top-[9px] scale-x-50" fill="white" width="20" height="20" viewBox="0 0 50 50" {
                         path d="M 57.29217,4.9844012 V 56.568575 C 44.512514,39.388798 29.429048,35.264265 12.536889,30.729102 29.111034,27.220159 45.273777,21.221938 57.29217,4.9844012 Z" {}
                     }
-                input type="text" placeholder="Buscá una palabra" class="w-full md:w-auto py-2 px-1 rounded-md my-2";
+                    input
+                        _="on keyup debounced at 300ms
+                            set :x to my.value.length
+                            if :x > 0
+                                remove .hidden from #search-results
+                            else
+                                add .hidden to #search-results
+                            end
+                            "
+                        type="text"
+                        placeholder="Buscá una palabra"
+                        class="w-full md:w-auto py-2 px-1 rounded-md my-2 bg-white text-black";
                 }
                 div class="table" {
                     button class="table-cell align-middle h-14 text-center w-full" {
@@ -52,6 +69,16 @@ fn navbar() -> Markup {
             }
         }
     }
+}
+
+fn inline_definition() -> Markup {
+    html! {
+        div class="py-2 mx-2" {
+            span class="font-bold pr-2" { "Polola" }
+            span class="opacity-75" { "Otra palabra para decir enamorado/a" }
+        }
+    }
+}
 
 pub fn homepage() -> Markup {
     skeleton(html! {

tailwind.config.js

@@ -13,7 +13,9 @@ module.exports = {
                 'serif': ["'Playfair Display'", "serif"],
             },
             colors: {
-                "c-primary": "var(--c-primary)"
+                "c-primary": "var(--c-primary)",
+                "c-bg": "var(--c-bg)",
+                "c-on-bg": "var(--c-on-bg)",
             },
         },
     },