From 3e56fd875e5d6527b57288102798ecfbca078aac Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 21 May 2024 19:46:48 -0500
Subject: [PATCH] show search preview with hyperscript

---
 src/view/mod.rs    | 63 +++++++++++++++++++++++++++++++++-------------
 tailwind.config.js |  4 ++-
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/view/mod.rs b/src/view/mod.rs
index 10b4669..6a48a3c 100644
--- a/src/view/mod.rs
+++ b/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,28 +32,54 @@ 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="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 class="table" {
-                a href="/" class="table-cell align-middle h-14 text-center" {
-                    (bird("var(--c-on-bg)".into(), 36))
-                }
-            }
-            div class="relative" {
-                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";
-            }
-            div class="table" {
-                button class="table-cell align-middle h-14 text-center w-full" {
-                    (magnifying_glass("var(--c-on-bg)".into(), 36))
+        nav class="fixed z-50 bottom-0 left-0 w-full h-14" {
+            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))
+                    }
+                }
+                div class="relative" {
+                    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
+                        _="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" {
+                        (magnifying_glass("var(--c-on-bg)".into(), 36))
+                    }
                 }
             }
         }
     }
 }
 
+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! {
         (navbar())
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ba1680..e3fd70b 100644
--- a/tailwind.config.js
+++ b/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)",
             },
         },
     },