ui_components 0.1.1 → 0.1.3

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>

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

@@ -10,9 +10,11 @@
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -27,9 +29,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar in custom sizes" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar in custom sizes" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -62,9 +64,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar rounded" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar rounded" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -85,9 +87,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar with mask" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar with mask" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -114,9 +116,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar group" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar group" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(css_class: "avatar-group -space-x-6") do |avatar| $>
@@ -149,9 +151,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar group with counter" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar group with counter" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new(css_class: "avatar-group -space-x-6") do |avatar| $>
@@ -184,9 +186,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar with ring" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar with ring" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -201,9 +203,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar with presence indicator" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar with presence indicator" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -224,9 +226,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Avatar placeholder" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Avatar placeholder" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |avatar| $>
@@ -258,4 +260,15 @@
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Avatar</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Accordion", daisy_ui_accordion_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Badge >", daisy_ui_badge_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>