Cleaning up folder structure, testing themes

docs/src/_includes/macros/code_block.njk

@@ -0,0 +1,29 @@
+{% macro code_block(code, language="html") %}
+<div 
+  class="relative"
+  x-data="{ 
+    copied: false, 
+    copy() { 
+      const codeElement = $refs.code;
+      if (!codeElement) return;
+      navigator.clipboard.writeText(codeElement.textContent || '').then(() => {
+        this.copied = true;
+        setTimeout(() => { this.copied = false }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy text: ', err);
+      });
+    } 
+  }"
+>
+  <pre x-ref="code" class="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
+  
+  <button 
+    @click="copy()" 
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-3 top-3"
+  >
+    {% lucide "clipboard", { "class": "size-4", "x-show": "!copied" } %}
+    {% lucide "check", { "class": "size-4", "x-show": "copied" } %}
+  </button>
+</div>
+{% endmacro %}
+

docs/src/_includes/macros/code_preview.njk

@@ -0,0 +1,28 @@
+{% macro code_preview(id, code, class=None, default_code=false) %}
+{% from "./code_block.njk" import code_block %}
+{% set code_panel = code_block(code) %}
+{% set preview_panel %}
+<div class="ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
+  <div class="preview flex min-h-[350px] w-full justify-center p-10 items-center">
+    <div {% if class %}class="{{ class }}"{% endif %}>
+      {{ code | safe }}
+    </div>
+  </div>
+</div>
+{% endset %}
+
+<div class="relative my-6">
+  {% from "components/tabs.njk" import tabs %}
+  {% set tabsets = [
+    { tab: "Preview", panel: preview_panel },
+    { tab: "Code", panel: code_panel }
+  ] %}
+  
+  {{ tabs(
+    id="code-block-{{ id }}",
+    tabsets=tabsets,
+    default_tab_index=(2 if default_code else 1),
+    register_on=["alpine:init", "htmx:afterSwap"]
+  ) }}
+</div>
+{% endmacro %}