Almost done with documentation

docs/src/_includes/macros/code_block.njk

@@ -1,6 +1,6 @@
-{% macro code_block(code, language="html") %}
+{% macro code_block(code, language="html", class="my-4") %}
 <div 
-  class="relative"
+  class="relative {{ class }}"
   x-data="{ 
     copied: false, 
     copy() { 
@@ -25,5 +25,4 @@
     {% lucide "check", { "class": "size-4", "x-show": "copied" } %}
   </button>
 </div>
-{% endmacro %}
-
+{% endmacro %}

docs/src/_includes/macros/code_preview.njk

@@ -1,6 +1,6 @@
 {% macro code_preview(id, code, class=None, default_code=false) %}
 {% from "./code_block.njk" import code_block %}
-{% set code_panel = code_block(code) %}
+{% set code_panel = code_block(code, class="") %}
 {% 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">