Centralizing tabbed demo logic

Author: weaverryan

ux.symfony.com/templates/liveDemoBase.html.twig

@@ -31,7 +31,7 @@
         {% endblock %}
 
         <div class="p-4 markdown-container rainbow-gradient mt-5" id="demo" style="position: relative;">
-                <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
+            <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
             {% block demo_content %}{% endblock %}
         </div>
     </div>

ux.symfony.com/templates/liveDemoTabsBase.html.twig

@@ -0,0 +1,22 @@
+{% extends 'liveDemoBase.html.twig' %}
+
+{% block code_block_full %}
+<div class="row mb-5">
+    <div class="terminal-code">
+        <ul class="nav nav-tabs">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#demo_component" type="button" role="tab" aria-controls="demo_component" aria-selected="true">src/Twig/MealPlannerComponent.php</button>
+          </li>
+          <li class="nav-item" role="presentation">
+              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_template" type="button" role="tab" aria-controls="demo_template">templates/components/meal_planner.html.twig</button>
+          </li>
+          <li class="nav-item" role="presentation">
+              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_form" type="button" role="tab" aria-controls="demo_form">src/Form/MealPlannerForm.php</button>
+          </li>
+        </ul>
+        <div class="tab-content" id="code-tabs">
+            {% block demo_code_tabs %}{% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}

ux.symfony.com/templates/live_component_demo/dependent_form_fields.html.twig

@@ -1,44 +1,27 @@
-{% extends 'liveDemoBase.html.twig' %}
+{% extends 'liveDemoTabsBase.html.twig' %}
 
-{% block code_block_full %}
-<div class="row mb-5">
-    <div class="terminal-code">
-        <ul class="nav nav-tabs">
-          <li class="nav-item" role="presentation">
-            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#demo_component" type="button" role="tab" aria-controls="demo_component" aria-selected="true">src/Twig/MealPlannerComponent.php</button>
-          </li>
-          <li class="nav-item" role="presentation">
-              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_template" type="button" role="tab" aria-controls="demo_template">templates/components/meal_planner.html.twig</button>
-          </li>
-          <li class="nav-item" role="presentation">
-              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_form" type="button" role="tab" aria-controls="demo_form">src/Form/MealPlannerForm.php</button>
-          </li>
-        </ul>
-        <div class="tab-content" id="code-tabs">
-            <div class="tab-pane show active" id="demo_component">
-                {% component code_block with { filename: 'src/Twig/MealPlannerComponent.php', showFilename: false, height: '300px' } %}
-                    {% block content %}
-                        {{- source('@src/Twig/MealPlannerComponent.php')|cleanup_php_file -}}
-                    {% endblock %}
-                {% endcomponent %}
-            </div>
-            <div class="tab-pane" id="demo_template">
-                {% component code_block with { filename: 'templates/components/meal_planner.html.twig', showFilename: false, height: '300px' } %}
-                    {% block content %}
-                        {{- source('components/meal_planner.html.twig') -}}
-                    {% endblock %}
-                {% endcomponent %}
-            </div>
-            <div class="tab-pane" id="demo_form">
-                {% component code_block with { filename: 'src/Form/MealPlannerForm.php', showFilename: false, height: '300px' } %}
-                    {% block content %}
-                        {{- source('@src/Form/MealPlannerForm.php')|cleanup_php_file -}}
-                    {% endblock %}
-                {% endcomponent %}
-            </div>
-        </div>
+{% block demo_code_tabs %}
+    <div class="tab-pane show active" id="demo_component">
+        {% component code_block with { filename: 'src/Twig/MealPlannerComponent.php', showFilename: false, height: '300px' } %}
+            {% block content %}
+                {{- source('@src/Twig/MealPlannerComponent.php')|cleanup_php_file -}}
+            {% endblock %}
+        {% endcomponent %}
+    </div>
+    <div class="tab-pane" id="demo_template">
+        {% component code_block with { filename: 'templates/components/meal_planner.html.twig', showFilename: false, height: '300px' } %}
+            {% block content %}
+                {{- source('components/meal_planner.html.twig') -}}
+            {% endblock %}
+        {% endcomponent %}
+    </div>
+    <div class="tab-pane" id="demo_form">
+        {% component code_block with { filename: 'src/Form/MealPlannerForm.php', showFilename: false, height: '300px' } %}
+            {% block content %}
+                {{- source('@src/Form/MealPlannerForm.php')|cleanup_php_file -}}
+            {% endblock %}
+        {% endcomponent %}
     </div>
-</div>
 {% endblock %}
 
 {% block demo_content %}