ui_components 0.1.0 → 0.1.2

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>

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

@@ -6,17 +6,18 @@
     <ul class="bg-base-100 rounded-box shadow-md p-2">
       <%= link_to "< Avatar", daisy_ui_avatar_path, class: "link link-primary m-2" %>
       <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Card >", daisy_ui_card_path, class: "link link-primary m-2" %>
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
-                  <$= render #{component}.new do $>
-                    Default
-                  <$ end $>
+                  <$= render #{component}.new.with_content("Default") $>
                 ERB
       ) %>
     <% end %>
@@ -24,15 +25,13 @@
 
   <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge sizes" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge sizes" } %>
+    <%= doc.with_body do |body| %>
       <% sizes.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
-                    <$= render #{component}.new(size: "#{key}") do $>
-                      #{value}
-                    <$ end $>
+                    <$= render #{component}.new(size: "#{key}").with_content("#{value}") $>
                   ERB
         ) %>
       <% end %>
@@ -41,15 +40,13 @@
 
   <% colors = { 'primary' => 'Primary', 'secondary' => 'Secondary', 'accent' => 'Accent', 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge with colors" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge with colors" } %>
+    <%= doc.with_body do |body| %>
       <% colors.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
-                    <$= render #{component}.new(color: "#{key}") do $>
-                      #{value}
-                    <$ end $>
+                    <$= render #{component}.new(color: "#{key}").with_content("#{value}") $>
                   ERB
         ) %>
       <% end %>
@@ -59,18 +56,17 @@
   <% kinds = { 'soft' => 'Soft', 'outline' => 'Outline', 'dash' => 'Dash', 'ghost' => 'Ghost' } %>
 
   <% kinds.each do |kind_key, kind_value| %>
-    <%= render DocumentationComponent.new do |document| %>
-      <%= document.with_header { "# #{kind_value} #{kind_key == "ghost" ? 'badge' : 'badges'}" } %>
-      <%= document.with_body do |body| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{kind_value} #{kind_key == "ghost" ? 'badge' : 'badges'}" } %>
+      <%= doc.with_body do |body| %>
         <% colors.each do |color_key, value| %>
 
           <% next if data_display_badge_skip_kind(kind_key:, color_key:) %>
+          <% string_value = kind_key == 'ghost' ? kind_value : value %>
 
           <%= body.with_preview_example(
             source: <<~ERB
-                      <$= render #{component}.new(#{data_display_badge_handle_component_params(kind_key:, color_key:)}) do $>
-                        #{kind_key == "ghost" ? kind_value : value}
-                      <$ end $>
+                      <$= render #{component}.new(#{data_display_badge_handle_component_params(kind_key:, color_key:)}).with_content("#{string_value}") $>
                     ERB
           ) %>
         <% end %>
@@ -78,9 +74,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Empty badge" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Empty badge" } %>
+    <%= doc.with_body do |body| %>
       <% sizes.keys.reverse.each do |key| %>
         <%= body.with_preview_example(
           source: <<~ERB
@@ -93,9 +89,9 @@
 
   <% badge_with_icon_colors = { 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge with icon" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge with icon" } %>
+    <%= doc.with_body do |body| %>
       <% badge_with_icon_colors.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
@@ -110,17 +106,15 @@
   <% end %>
 
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge in a text" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge in a text" } %>
+    <%= doc.with_body do |body| %>
       <% sizes.keys.reverse.each_with_index do |key, index| %>
         <%= body.with_preview_example(
           source: <<~ERB
                     <h1 class="text-#{key == "md" ? "base" : key} font-semibold">
                       Heading #{index+1}
-                      <$= render #{component}.new(size: "#{key}") do $>
-                        Badge
-                      <$ end $>
+                      <$= render #{component}.new(size: "#{key}").with_content("Badge") $>
                     </h1>
                   ERB
         ) %>
@@ -130,21 +124,30 @@
 
   <% badge_with_button_colors = ["", "secondary"] %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Badge in a button" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Badge in a button" } %>
+    <%= doc.with_body do |body| %>
       <% badge_with_button_colors.each do |key| %>
         <%= body.with_preview_example(
           source: <<~ERB
                     <$= render UiComponents::DaisyUi::Action::ButtonComponent.new do $>
                       Inbox
-                      <$= render #{component}.new(size: "sm"#{", color: \"#{key}\"" if key.present?}) do $>
-                        +99
-                      <$ end $>
+                      <$= render #{component}.new(size: "sm"#{", color: \"#{key}\"" if key.present?}).with_content("+99") $>
                     <$ end $>
                   ERB
         ) %>
       <% end %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Badge</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Avatar", daisy_ui_avatar_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Card >", daisy_ui_card_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>

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

@@ -0,0 +1,302 @@
+<% component = UiComponents::DaisyUi::DataDisplay::CardComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Card</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Badge", daisy_ui_badge_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Carousel >", daisy_ui_carousel_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |card| $>
+                    <$= card.with_figure do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
+                    <$ end $>
+
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title_content("Card Title") $>
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Buy Now") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card sizes" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <% sizes.each do |key, value| %>
+        <%= body.with_preview_example(
+
+          source: <<~ERB
+                    <$= render #{component}.new(size: "#{key}") do |card| $>
+                      <$= card.with_body do |body| $>
+                        <$= body.with_title_content("#{value} Card") $>
+                        <$= body.with_context do $>
+                          <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                        <$ end $>
+
+                        <$= body.with_action do $>
+                          <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Buy Now") $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% border_kinds = { 'border' => 'card-border', 'dash' => 'dash border' } %>
+
+  <% border_kinds.each do |key, value| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Card with a #{value}" } %>
+      <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-100" }) do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(border_kind: "#{key}") do |card| $>
+                      <$= card.with_body do |body| $>
+                        <$= body.with_title_content("Card Title") $>
+                        <$= body.with_context do $>
+                          <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                        <$ end $>
+
+                        <$= body.with_action do $>
+                          <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Buy Now") $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with badge" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |card| $>
+                    <$= card.with_figure do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
+                    <$ end $>
+
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title do $>
+                        Card Title
+                        <$= render UiComponents::DaisyUi::DataDisplay::BadgeComponent.new(color: "secondary").with_content("NEW") $>
+                      <$ end $>
+
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::DataDisplay::BadgeComponent.new(kind: "outline").with_content("Fashion") $>
+                        <$= render UiComponents::DaisyUi::DataDisplay::BadgeComponent.new(kind: "outline").with_content("Products") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with bottom image" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |card| $>
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title_content("Card Title") $>
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= card.with_figure do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with centered content and paddings" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |card| $>
+                    <$= card.with_figure(css_class: "px-10 pt-10") do $>
+                      <img class="rounded-xl" src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
+                    <$ end $>
+
+                    <$= card.with_body(css_class: "items-center text-center") do |body| $>
+                      <$= body.with_title_content("Card Title") $>
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Buy Now") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with image overlay" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(image_full: true) do |card| $>
+                    <$= card.with_figure do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" />
+                    <$ end $>
+
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title_content("Card Title") $>
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Buy Now") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with custom color" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "bg-primary") do |card| $>
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title_content("Card Title") $>
+                      <$= body.with_context do $>
+                        <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new.with_content("Buy Now") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Centered card with neutral color" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "bg-neutral") do |card| $>
+                    <$= card.with_body(css_class: "items-center text-center") do |body| $>
+                      <$= body.with_title_content("Cookies!") $>
+                      <$= body.with_context do $>
+                        <p>We are using cookies for no reason.</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Accept") $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "ghost").with_content("Deny") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with action on top" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |card| $>
+                    <$= card.with_body do |body| $>
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(shape: "square", size: "sm") do $>
+                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
+                        <$ end $>
+                      <$ end $>
+
+                      <$= body.with_context do $>
+                        <p>We are using cookies for no reason.</p>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card with image on side" } %>
+    <%= doc.with_body(preview_options: { css_class: "grid grid-cols gap-y-4 p-2 bg-base-200" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(side: true, css_class: "w-lg") do |card| $>
+                    <$= card.with_figure do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" alt="Movie" />
+                    <$ end $>
+
+                    <$= card.with_body do |body| $>
+                      <$= body.with_title_content("New movie is released!") $>
+                      <$= body.with_context do $>
+                        <p>Click the button to watch on Jetflix app.</p>
+                      <$ end $>
+
+                      <$= body.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(color: "primary").with_content("Watch") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Card</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Badge", daisy_ui_badge_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Carousel >", daisy_ui_carousel_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>