ui_components 0.1.0 → 0.1.2

data/app/views/ui_components/daisy_ui/action_components/dropdown.html.erb

@@ -10,16 +10,18 @@
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |dropdown| $>
-                    <$= dropdown.with_anchor { "Click" } $>
+                    <$= dropdown.with_anchor_content("Click") $>
                     <$= dropdown.with_menu do |menu| $>
-                      <$= menu.with_item { "Item 1" } $>
-                      <$= menu.with_item { "Item 2" } $>
+                      <$= menu.with_item_content("Item 1") $>
+                      <$= menu.with_item_content("Item 2") $>
                     <$ end $>
                   <$ end $>
                 ERB
@@ -32,18 +34,18 @@
 
   <% axes.each do |axis_key| %>
     <% aligns.each do |align_key| %>
-      <%= render DocumentationComponent.new do |document| %>
-        <%= document.with_header { action_dropdown_handle_component_title(axis_key:, align_key:) } %>
-        <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+      <%= render DocumentationComponent.new do |doc| %>
+        <%= doc.with_header { action_dropdown_handle_component_title(axis_key:, align_key:) } %>
+        <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
           <% component_params = action_dropdown_handle_component_params(axis_key:, align_key:) %>
 
           <%= body.with_preview_example(
             source: <<~ERB
                       <$= render #{component}.new#{"(#{component_params})" if component_params.present?} do |dropdown| $>
-                        <$= dropdown.with_anchor { "Click" } $>
+                        <$= dropdown.with_anchor_content("Click") $>
                         <$= dropdown.with_menu do |menu| $>
-                          <$= menu.with_item { "Item 1" } $>
-                          <$= menu.with_item { "Item 2" } $>
+                          <$= menu.with_item_content("Item 1") $>
+                          <$= menu.with_item_content("Item 2") $>
                         <$ end $>
                       <$ end $>
                     ERB
@@ -56,16 +58,16 @@
   <% events = %w[hover opened] %>
 
   <% events.each do |key| %>
-    <%= render DocumentationComponent.new do |document| %>
-      <%= document.with_header { "# Dropdown - #{key}" } %>
-      <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Dropdown - #{key}" } %>
+      <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
         <%= body.with_preview_example(
           source: <<~ERB
                     <$= render #{component}.new(#{key}: true) do |dropdown| $>
-                      <$= dropdown.with_anchor { "Click" } $>
+                      <$= dropdown.with_anchor_content("Click") $>
                       <$= dropdown.with_menu do |menu| $>
-                        <$= menu.with_item { "Item 1" } $>
-                        <$= menu.with_item { "Item 2" } $>
+                        <$= menu.with_item_content("Item 1") $>
+                        <$= menu.with_item_content("Item 2") $>
                       <$ end $>
                     <$ end $>
                   ERB
@@ -74,13 +76,13 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Card as dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card as dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |dropdown| $>
-                    <$= dropdown.with_anchor(css_class: "m-1") { "Click" } $>
+                    <$= dropdown.with_anchor(css_class: "m-1").with_content("Click") $>
                     <$= dropdown.with_card do |card| $>
                       <$= card.with_item do $>
                         <p>This is a card. You can use any element as a dropdown.</p>
@@ -92,9 +94,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Helper dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Helper dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   A normal text and a helper dropdown
@@ -114,4 +116,15 @@
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Dropdown</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Button", daisy_ui_button_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Modal >", daisy_ui_modal_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>

data/app/views/ui_components/daisy_ui/action_components/modal.html.erb

@@ -10,17 +10,19 @@
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Dialog modal" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Dialog modal" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_modal_1") do |modal| $>
-                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_anchor_content("open modal") $>
                     <$= modal.with_dialog do |dialog| $>
                       <$= dialog.with_box do |box| $>
-                        <$= box.with_title { "Hello!" } $>
-                        <$= box.with_body { "Press ESC key or click the button below to close" } $>
+                        <$= box.with_title_content("Hello!") $>
+                        <$= box.with_body_content("Press ESC key or click the button below to close") $>
                         <$= box.with_action do |action| $>
                           <$= action.with_item { "Close" } $>
                         <$ end $>
@@ -32,17 +34,17 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Dialog modal, closes when clicked outside" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Dialog modal, closes when clicked outside" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_modal_2") do |modal| $>
-                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_anchor_content("open modal") $>
                     <$= modal.with_dialog(backdrop: true) do |dialog| $>
                       <$= dialog.with_box do |box| $>
-                        <$= box.with_title { "Hello!" } $>
-                        <$= box.with_body { "Press ESC key or click outside to close" } $>
+                        <$= box.with_title_content("Hello!") $>
+                        <$= box.with_body_content("Press ESC key or click outside to close") $>
                       <$ end $>
                     <$ end $>
                   <$ end $>
@@ -51,17 +53,17 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Dialog modal with a close button at corner" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Dialog modal with a close button at corner" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_modal_3") do |modal| $>
-                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_anchor_content("open modal") $>
                     <$= modal.with_dialog do |dialog| $>
                       <$= dialog.with_box do |box| $>
-                        <$= box.with_title { "Hello!" } $>
-                        <$= box.with_body { "Press ESC key or click on ✕ button to close" } $>
+                        <$= box.with_title_content("Hello!") $>
+                        <$= box.with_body_content("Press ESC key or click on ✕ button to close") $>
                         <$= box.with_close { "X" } $>
                       <$ end $>
                     <$ end $>
@@ -70,4 +72,15 @@
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Modal</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Dropdown", daisy_ui_dropdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Swap >", daisy_ui_swap_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>

data/app/views/ui_components/daisy_ui/action_components/swap.html.erb

@@ -6,26 +6,29 @@
     <ul class="bg-base-100 rounded-box shadow-md p-2">
       <%= link_to "< Modal", daisy_ui_modal_path, class: "link link-primary m-2" %>
       <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Data display#Accordion >", daisy_ui_accordion_path, class: "link link-primary m-2" %>
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Swap text" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Swap text" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |swap| $>
-                    <$= swap.with_on { "ON" } $>
-                    <$= swap.with_off { "OFF" } $>
+                    <$= swap.with_on_content("ON") $>
+                    <$= swap.with_off_content("OFF") $>
                   <$ end $>
                 ERB
       ) %>
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Swap volume icons" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Swap volume icons" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |swap| $>
@@ -41,9 +44,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Swap icons with rotate effect" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Swap icons with rotate effect" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(effect: "rotate") do |swap| $>
@@ -59,9 +62,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Swap icons with flip effect" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Swap icons with flip effect" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(effect: "flip") do |swap| $>
@@ -77,9 +80,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Activate using class name instead of checkbox" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Activate using class name instead of checkbox" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(active: true) do |swap| $>
@@ -94,4 +97,15 @@
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Swap</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Modal", daisy_ui_modal_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Data display#Accordion >", daisy_ui_accordion_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>

data/app/views/ui_components/daisy_ui/data_display_components/accordion.html.erb

@@ -4,42 +4,33 @@
   <div class="mb-2">
     <h1 class="font-bold mb-2"># Data display > Accordion</h1>
     <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Actions#Swap", daisy_ui_swap_path, class: "link link-primary m-2" %>
       <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
       <%= link_to "Avatar >", daisy_ui_avatar_path, class: "link link-primary m-2" %>
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Accordion using radio inputs" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Accordion using radio inputs" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |accordion| $>
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I create an account?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click the "Sign Up" button in the top right corner and follow the registration process.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I create an account?") $>
+                      <$ item.with_body_content('Click the "Sign Up" button in the top right corner and follow the registration process.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        I forgot my password. What should I do?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
-                      <$ end $>
+                      <$ item.with_anchor_content("I forgot my password. What should I do?") $>
+                      <$ item.with_body_content('Click on "Forgot Password" on the login page and follow the instructions sent to your email.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I update my profile information?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Go to "My Account" settings and select "Edit Profile" to make changes.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I update my profile information?") $>
+                      <$ item.with_body_content('Go to "My Account" settings and select "Edit Profile" to make changes.') $>
                     <$ end $>
                   <$ end $>
                 ERB
@@ -50,37 +41,25 @@
   <% icons = %w[arrow plus] %>
 
   <% icons.each_with_index do |key, index| %>
-    <%= render DocumentationComponent.new do |document| %>
-      <%= document.with_header { "# Accordion with #{key == "plus" ? "plus/minus" : key} icon" } %>
-      <%= document.with_body do |body| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Accordion with #{key == "plus" ? "plus/minus" : key} icon" } %>
+      <%= doc.with_body do |body| %>
         <%= body.with_preview_example(
           source: <<~ERB
                     <$= render #{component}.new(opener: "my_accordion_#{index+1}") do |accordion| $>
                       <$= accordion.with_item(icon: "#{key}") do |item| $>
-                        <$ item.with_anchor do $>
-                          How do I create an account?
-                        <$ end $>
-                        <$ item.with_body do $>
-                          Click the "Sign Up" button in the top right corner and follow the registration process.
-                        <$ end $>
+                        <$ item.with_anchor_content("How do I create an account?") $>
+                        <$ item.with_body_content('Click the "Sign Up" button in the top right corner and follow the registration process.') $>
                       <$ end $>
 
                       <$= accordion.with_item(icon: "#{key}") do |item| $>
-                        <$ item.with_anchor do $>
-                          I forgot my password. What should I do?
-                        <$ end $>
-                        <$ item.with_body do $>
-                          Click on "Forgot Password" on the login page and follow the instructions sent to your email.
-                        <$ end $>
+                        <$ item.with_anchor_content("I forgot my password. What should I do?") $>
+                        <$ item.with_body_content('Click on "Forgot Password" on the login page and follow the instructions sent to your email.') $>
                       <$ end $>
 
                       <$= accordion.with_item(icon: "#{key}") do |item| $>
-                        <$ item.with_anchor do $>
-                          How do I update my profile information?
-                        <$ end $>
-                        <$ item.with_body do $>
-                          Go to "My Account" settings and select "Edit Profile" to make changes.
-                        <$ end $>
+                        <$ item.with_anchor_content("How do I update my profile information?") $>
+                        <$ item.with_body_content('Go to "My Account" settings and select "Edit Profile" to make changes.') $>
                       <$ end $>
                     <$ end $>
                   ERB
@@ -89,37 +68,25 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Accordion using checkbox inputs" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Accordion using checkbox inputs" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_accordion_3", toggle: true) do |accordion| $>
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I create an account?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click the "Sign Up" button in the top right corner and follow the registration process.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I create an account?") $>
+                      <$ item.with_body_content('Click the "Sign Up" button in the top right corner and follow the registration process.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        I forgot my password. What should I do?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
-                      <$ end $>
+                      <$ item.with_anchor_content("I forgot my password. What should I do?") $>
+                      <$ item.with_body_content('Click on "Forgot Password" on the login page and follow the instructions sent to your email.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I update my profile information?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Go to "My Account" settings and select "Edit Profile" to make changes.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I update my profile information?") $>
+                      <$ item.with_body_content('Go to "My Account" settings and select "Edit Profile" to make changes.') $>
                     <$ end $>
                   <$ end $>
                 ERB
@@ -127,37 +94,25 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Accordion opened" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Accordion opened" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_accordion_4") do |accordion| $>
                     <$= accordion.with_item(opened: true) do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I create an account?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click the "Sign Up" button in the top right corner and follow the registration process.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I create an account?") $>
+                      <$ item.with_body_content('Click the "Sign Up" button in the top right corner and follow the registration process.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        I forgot my password. What should I do?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
-                      <$ end $>
+                      <$ item.with_anchor_content("I forgot my password. What should I do?") $>
+                      <$ item.with_body_content('Click on "Forgot Password" on the login page and follow the instructions sent to your email.') $>
                     <$ end $>
 
                     <$= accordion.with_item do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I update my profile information?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Go to "My Account" settings and select "Edit Profile" to make changes.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I update my profile information?") $>
+                      <$ item.with_body_content('Go to "My Account" settings and select "Edit Profile" to make changes.') $>
                     <$ end $>
                   <$ end $>
                 ERB
@@ -165,41 +120,40 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Using Accordion and Join together" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Using Accordion and Join together" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(opener: "my_accordion_5", css_class: "join join-vertical bg-base-100") do |accordion| $>
                     <$= accordion.with_item(css_class: "join-item") do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I create an account?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click the "Sign Up" button in the top right corner and follow the registration process.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I create an account?") $>
+                      <$ item.with_body_content('Click the "Sign Up" button in the top right corner and follow the registration process.') $>
                     <$ end $>
 
                     <$= accordion.with_item(css_class: "join-item") do |item| $>
-                      <$ item.with_anchor do $>
-                        I forgot my password. What should I do?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
-                      <$ end $>
+                      <$ item.with_anchor_content("I forgot my password. What should I do?") $>
+                      <$ item.with_body_content('Click on "Forgot Password" on the login page and follow the instructions sent to your email.') $>
                     <$ end $>
 
                     <$= accordion.with_item(css_class: "join-item") do |item| $>
-                      <$ item.with_anchor do $>
-                        How do I update my profile information?
-                      <$ end $>
-                      <$ item.with_body do $>
-                        Go to "My Account" settings and select "Edit Profile" to make changes.
-                      <$ end $>
+                      <$ item.with_anchor_content("How do I update my profile information?") $>
+                      <$ item.with_body_content('Go to "My Account" settings and select "Edit Profile" to make changes.') $>
                     <$ end $>
                   <$ end $>
                 ERB
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Accordion</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Actions#Swap", daisy_ui_swap_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Avatar >", daisy_ui_avatar_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>