spike1 tabs hateoas

librasteve · Sep 7, 2024 · b46bc18 · b46bc18
1 parent 22d32ab
commit b46bc18
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 1 deletion.
diff --git a/META6.json b/META6.json
@@ -33,7 +33,8 @@
     "Routes::Examples::Dialogs-UIKit": "lib/Routes/Examples/Dialogs-UIKit.rakumod",
     "Routes::Examples::Dialogs-Bootstrap": "lib/Routes/Examples/Dialogs-Bootstrap.rakumod",
     "Routes::Examples::Dialogs-Custom": "lib/Routes/Examples/Dialogs-Custom.rakumod",
-    "Routes::Examples::Dialogs-Pico": "lib/Routes/Examples/Dialogs-Pico.rakumod"
+    "Routes::Examples::Dialogs-Pico": "lib/Routes/Examples/Dialogs-Pico.rakumod",
+    "Routes::Examples::Tabs-Hateoas": "lib/Routes/Examples/Tabs-Hateoas.rakumod"
   },
   "resources": [
   ],

diff --git a/lib/Routes.rakumod b/lib/Routes.rakumod
@@ -66,5 +66,8 @@ sub routes() is export {
 
         use Routes::Examples::Dialogs-Pico;
         include dialogs_pico => dialogs_pico-routes;
+
+        use Routes::Examples::Tabs-Hateoas;
+        include tabs_hateoas => tabs_hateoas-routes;
     }
 }
diff --git a/lib/Routes/Examples/Tabs-Hateoas.rakumod b/lib/Routes/Examples/Tabs-Hateoas.rakumod
@@ -0,0 +1,25 @@
+use Cro::HTTP::Router;
+use Cro::WebApp::Template;
+
+sub tabs_hateoas-routes() is export {
+
+    route {
+        template-location 'templates/tabs_hateoas';
+
+        get -> {
+            template 'index.crotmp';
+        }
+
+        get -> 'tab1' {
+            template 'tab1.crotmp';
+        }
+
+        get -> 'tab2' {
+            template 'tab2.crotmp';
+        }
+
+        get -> 'tab3' {
+            template 'tab3.crotmp';
+        }
+    }
+}
diff --git a/templates/tabs_hateoas/index.crotmp b/templates/tabs_hateoas/index.crotmp
@@ -0,0 +1,5 @@
+<div id="tabs" hx-get="/tabs_hateoas/tab1" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
+
+<#>iamerejh</#>
+<#>https://codepen.io/vardumper/pen/VwdJoyE</#>
+<#>https://erikpoehler.com/2022/12/15/picocss-content-tabs/</#>
diff --git a/templates/tabs_hateoas/tab1.crotmp b/templates/tabs_hateoas/tab1.crotmp
@@ -0,0 +1,22 @@
+<nav>
+  <ul>
+    <li hx-get="/tabs_hateoas/tab1" hx-trigger="click" class="selected" role="tab" aria-controls="tab-content">
+        Tab 1
+    </li>
+    <li hx-get="/tabs_hateoas/tab2" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 2
+    </li>
+    <li hx-get="/tabs_hateoas/tab3" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 3
+    </li>
+  </ul>
+</nav>
+
+<div id="tab-content" role="tabpanel" class="tab-content">
+    Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over.
+    Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore.
+    Polaroid duis occaecat narwhal small batch food truck.
+    PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade.
+    Enim tousled cliche woke, typewriter single-origin coffee hella culpa.
+    Art party readymade 90's, asymmetrical hell of fingerstache ipsum.
+</div>
diff --git a/templates/tabs_hateoas/tab2.crotmp b/templates/tabs_hateoas/tab2.crotmp
@@ -0,0 +1,23 @@
+<nav>
+  <ul>
+    <li hx-get="/tabs_hateoas/tab1" hx-trigger="click" class="selected" role="tab" aria-controls="tab-content">
+        Tab 1
+    </li>
+    <li hx-get="/tabs_hateoas/tab2" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 2
+    </li>
+    <li hx-get="/tabs_hateoas/tab3" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 3
+    </li>
+  </ul>
+</nav>
+
+<div id="tab-content" role="tabpanel" class="tab-content">
+    Kitsch fanny pack yr, farm-to-table cardigan cillum commodo reprehenderit plaid dolore cronut meditation.
+    Tattooed polaroid veniam, anim id cornhole hashtag sed forage.
+    Microdosing pug kitsch enim, kombucha pour-over sed irony forage live-edge.
+    Vexillologist eu nulla trust fund, street art blue bottle selvage raw denim.
+    Dolore nulla do readymade, est subway tile affogato hammock 8-bit.
+    Godard elit offal pariatur you probably haven't heard of them post-ironic.
+    Prism street art cray salvia.
+</div>
diff --git a/templates/tabs_hateoas/tab3.crotmp b/templates/tabs_hateoas/tab3.crotmp
@@ -0,0 +1,21 @@
+<nav>
+  <ul>
+    <li hx-get="/tabs_hateoas/tab1" hx-trigger="click" class="selected" role="tab" aria-controls="tab-content">
+        Tab 1
+    </li>
+    <li hx-get="/tabs_hateoas/tab2" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 2
+    </li>
+    <li hx-get="/tabs_hateoas/tab3" hx-trigger="click" role="tab" aria-controls="tab-content">
+        Tab 3
+    </li>
+  </ul>
+</nav>
+
+<div id="tab-content" role="tabpanel" class="tab-content">
+    Aute chia marfa echo park tote bag hammock mollit artisan listicle direct trade.
+    Raw denim flexitarian eu godard etsy.
+    Poke tbh la croix put a bird on it fixie polaroid aute cred air plant four loko gastropub swag non brunch.
+    Iceland fanny pack tumeric magna activated charcoal bitters palo santo laboris quis consectetur cupidatat portland
+    aliquip venmo.
+</div>