Move combobox demos to code_examples

Author: ukutaht

lib/prima_web/live/demo_live/combobox_demo.html.heex

@@ -26,8 +26,8 @@
     elements.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.basic_combobox_demo {assigns} />
+  <div class="not-prose">
+    <.code_example file="combobox/basic.html.heex" id="basic-combobox-demo" />
   </div>
 
   <p>
@@ -45,8 +45,8 @@
     The component automatically switches to async mode with debounced search queries.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.live_component module={PrimaWeb.DemoLive.AsyncComboboxDemo} id="async-combobox-demo" />
+  <div class="not-prose">
+    <.code_example module={PrimaWeb.DemoLive.AsyncComboboxDemo} id="async-combobox-demo" />
   </div>
 
   <p>
@@ -63,8 +63,8 @@
     Perfect for tags, categories, or any user-generated content scenarios.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.creatable_combobox_demo {assigns} />
+  <div class="not-prose">
+    <.code_example file="combobox/creatable.html.heex" id="creatable-combobox-demo" />
   </div>
 
   <p>
@@ -79,8 +79,8 @@
     component to display selected items as removable pills.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.multi_select_combobox_demo {assigns} />
+  <div class="not-prose">
+    <.code_example file="combobox/multi_select.html.heex" id="multi-select-combobox-demo" />
   </div>
 
   <p>
@@ -107,8 +107,8 @@
     It automatically flips to the opposite side when there's insufficient space.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.positioned_combobox_demo />
+  <div class="not-prose">
+    <.code_example file="combobox/positioned.html.heex" id="positioned-combobox-demo" />
   </div>
 
   <p>
@@ -122,8 +122,8 @@
     The component is completely unstyled, giving you full control over the visual presentation.
   </p>
 
-  <div class="not-prose bg-white border border-gray-200 rounded-lg p-6 my-6">
-    <.flexible_markup_demo {assigns} />
+  <div class="not-prose">
+    <.code_example file="combobox/flexible_markup.html.heex" id="flexible-markup-combobox-demo" />
   </div>
 
   <p>

lib/prima_web/live/demo_live/combobox_page.html.heex

@@ -34,7 +34,7 @@
       </.combobox_options>
     </.combobox>
   </div>
-  
+
 <!-- Right Placement -->
   <div>
     <label class="block text-sm font-medium text-gray-700 mb-2">Color (opens to right)</label>
@@ -71,7 +71,7 @@
       </.combobox_options>
     </.combobox>
   </div>
-  
+
 <!-- Bottom with Large Offset -->
   <div>
     <label class="block text-sm font-medium text-gray-700 mb-2">Country (12px offset)</label>