dev tabs system

layouts/partials/extend-footer.html

@@ -0,0 +1 @@
+<script src="//unpkg.com/alpinejs" defer></script>

layouts/shortcodes/tab.html

@@ -0,0 +1,8 @@
+{{ $tabName := .Get "tabName" }}
+{{ .Parent.Scratch.Add "tabName" (slice $tabName) }}
+
+<div class="" x-show="openTab === {{ .Ordinal }}">
+
+    {{ $.Inner | markdownify }}
+
+</div>

layouts/shortcodes/tabs.html

@@ -0,0 +1,25 @@
+<div x-data="{ openTab: 0 }">
+
+    <nav class="flex p-1 space-x-1 bg-blue-900/20 rounded-md">
+
+        {{ $tabTotal := .Get "tabTotal" }}
+        {{ $tabName := .Scratch.Get "tabName" }}
+
+        {{ range $i, $sequence := (seq $tabTotal) }}
+
+        <button @click="openTab = {{ $i }}" class="w-full py-2.5 text-sm rounded-md focus:outline-none"
+            :class="openTab === {{ $i }} ? 'bg-primary-100 dark:bg-primary-900 shadow' : 'hover:bg-white/[0.12] hover:text-white'"
+            href="#">{{
+            (replaceRE "(\\s)" "" (index $tabName $i)) }}</button>
+
+        {{ end }}
+
+    </nav>
+
+    <div class="-mt-4">
+
+        {{ .Inner }}
+
+    </div>
+
+</div>