show search preview with hyperscript

Rocket.toml

@@ -0,0 +1,2 @@
+[default]
+address = "0.0.0.0"

package.json

@@ -11,7 +11,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "daisyui": "^4.6.1",
     "tailwindcss": "^3.4.1"
   }
 }

src/view/icons/mod.rs

@@ -0,0 +1,17 @@
+use maud::{html, Markup};
+
+pub fn magnifying_glass(fill: String, size: i32) -> Markup {
+    html! {
+        svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width=(size) height=(size) fill=(fill) viewBox="0 0 256 256" {
+            path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" {}
+        }
+    }
+}
+
+pub fn bird(fill: String, size: i32) -> Markup {
+    html! {
+        svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width=(size) height=(size) fill=(fill) viewBox="0 0 256 256" style="--darkreader-inline-fill: #000000;" data-darkreader-inline-fill="" {
+            path d="M176,72a16,16,0,1,1-16-16A16,16,0,0,1,176,72Zm68,8a12,12,0,0,1-5.34,10L220,102.42V120A108.12,108.12,0,0,1,112,228H24A20,20,0,0,1,8.41,195.5l.15-.18L92,95.18V76.89C92,41.28,120.57,12.17,155.69,12H156a63.94,63.94,0,0,1,60.58,43.29L238.66,70A12,12,0,0,1,244,80Zm-33.63,0-10.69-7.13a12,12,0,0,1-5-7A40,40,0,0,0,156,36h-.19c-21.95.11-39.8,18.45-39.8,40.89V99.52a12,12,0,0,1-2.79,7.69L32.57,204H53.05l69.74-83.68a12,12,0,1,1,18.43,15.36L84.29,204H112a84.09,84.09,0,0,0,84-84V96a12,12,0,0,1,5.35-10Z" {}
+        }
+    }
+}

src/view/mod.rs

@@ -1,9 +1,13 @@
 use maud::{html, Markup, DOCTYPE};
 
+mod icons;
+
+use icons::{bird, magnifying_glass};
+
 pub fn skeleton(body: Markup) -> Markup {
     html! {
         (DOCTYPE)
-        html lang="es" data-theme="cupcake" {
+        html lang="es" {
             head {
                 title { "Jerguero" }
                 meta name="viewport" content="width=device-width, initial-scale=1.0";
@@ -16,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)
@@ -26,23 +32,51 @@ pub fn skeleton(body: Markup) -> Markup {
 
 fn navbar() -> Markup {
     html! {
-        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" {
+        nav class="fixed z-50 bottom-0 left-0 w-full h-14" {
-            div class="flex-none" {
+            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" {
-                a class="btn btn-ghost text-xl" {
+                (inline_definition())
-                    "J"
+                (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="flex-1" {   
+                div class="relative" {
-                div class="form-control" {
+                    svg class="absolute z-10 -left-[15px] top-[9px] scale-x-50" fill="white" width="20" height="20" viewBox="0 0 50 50" {
-                    input type="text" placeholder="Search" class="input input-bordered w-full md:w-auto";
+                        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))
                     }
                 }
-            div class="flex-none" {
-                a class="btn btn-ghost text-xl" {
-                    "s"
             }
         }
     }
+}
+
+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" }
+        }
     }
 }
 

static/tailwind.css

@@ -1,3 +1,26 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --c-primary: #0ea5e9;
+
+
+}
+
+:root {
+    --c-bg: white;
+    --c-on-bg: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --c-bg: #0e1419;
+        --c-on-bg: white;
+    }
+}
+
+html {
+    background-color: var(--c-bg);
+    color: var(--c-on-bg);
+}

tailwind.config.js

@@ -11,11 +11,15 @@ module.exports = {
         extend: {
             fontFamily: {
                 'serif': ["'Playfair Display'", "serif"],
-            }
+            },
+            colors: {
+                "c-primary": "var(--c-primary)",
+                "c-bg": "var(--c-bg)",
+                "c-on-bg": "var(--c-on-bg)",
+            },
         },
     },
     plugins: [
-        require("daisyui"),
         function ({ addComponents }) {
             addComponents({
                 '.container': {