Extract common layout tags into a page helper

admin/app/components/solidus_admin/layout/page_helpers.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module SolidusAdmin::Layout::PageHelpers
+  def page(&block)
+    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id)
+  end
+
+  def page_header_actions(&block)
+    tag.div(safe_join([
+      render(component("feedback").new),
+      capture(&block),
+    ]), class: "flex gap-2 items-center")
+  end
+
+  def page_header_back(back_path)
+    render component("ui/button").new(
+      tag: :a,
+      title: t(".back"),
+      icon: "arrow-left-line",
+      scheme: :secondary,
+      href: back_path
+    )
+  end
+
+  def page_header_title(title, &block)
+    tag.h1(safe_join([
+      tag.span(title, class: "body-title"),
+      (capture(&block) if block_given?) || "",
+    ]), class: "flex-1 text-2xl font-bold")
+  end
+
+  def page_header(&block)
+    tag.header(capture(&block), class: "py-6 flex items-center gap-4")
+  end
+
+  def page_with_sidebar(&block)
+    tag.div(capture(&block), class: "flex gap-4 items-start pb-4")
+  end
+
+  def page_with_sidebar_main(&block)
+    tag.div(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full")
+  end
+
+  def page_with_sidebar_aside(&block)
+    tag.aside(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full max-w-sm")
+  end
+
+  def page_footer(&block)
+    tag.div(capture(&block), class: "mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex")
+  end
+
+  def page_footer_actions(&block)
+    tag.div(capture(&block), class: "flex gap-2 grow")
+  end
+end

admin/app/components/solidus_admin/orders/new/component.html.erb

@@ -1,20 +1,13 @@
-<div class="px-4 relative" data-controller="<%= stimulus_id %>">
-  <header class="py-6 flex items-center gap-4">
-    <%= render component("ui/button").new(
-      tag: :a,
-      title: t(".back"),
-      icon: "arrow-left-line",
-      scheme: :secondary,
-      href: solidus_admin.orders_path
-    ) %>
-    <h1 class="flex items-center gap-2">
-      <span class="body-title"><%= t(".create_order") %></span>
-    </h1>
+<%= page do %>
+  <%= page_header do %>
+    <%= page_header_back solidus_admin.orders_path %>
 
-    <div class="ml-auto flex gap-2 items-center">
+    <%= page_header_title t(".create_order") %>
+
+    <%= page_header_actions do %>
       <%= render component("feedback").new %>
       <%= render component("ui/button").new(tag: :button, scheme: :secondary, text: t(".discard"), form: form_id) %>
       <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
-    </div>
-  </header>
-</div>
+    <% end %>
+  <% end %>
+<% end %>

admin/app/components/solidus_admin/orders/new/component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::Orders::New::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
   def initialize(order:)
     @order = order
   end

admin/app/components/solidus_admin/products/index/component.html.erb

@@ -1,19 +1,16 @@
-<div class="<%= stimulus_id %> px-4">
-  <header class="py-6 flex items-center">
-    <h1 class="body-title">
-      <%= title %>
-    </h1>
-
-    <div class="ml-auto flex gap-2 items-center">
+<%= page do %>
+  <%= page_header do %>
+    <%= page_header_title title %>
+    <%= page_header_actions do %>
       <%= render component("feedback").new %>
       <%= render component("ui/button").new(
         tag: :a,
         text: t('.add_product'),
         href: spree.new_admin_product_path,
         icon: "add-line",
       ) %>
-    </div>
-  </header>
+    <% end %>
+  <% end %>
 
   <%= render component('ui/table').new(
     id: 'products-list',
@@ -28,4 +25,4 @@
     prev_page_link: prev_page_link,
     next_page_link: next_page_link,
   ) %>
-</div>
+<% end %>

admin/app/components/solidus_admin/products/index/component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::Products::Index::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
   def initialize(page:)
     @page = page
   end

admin/app/components/solidus_admin/products/show/component.html.erb

@@ -1,19 +1,10 @@
-<div class="px-4 relative" data-controller="<%= stimulus_id %>">
-  <header class="py-6 flex items-center gap-4">
-    <%= render component("ui/button").new(
-      tag: :a,
-      title: t(".back"),
-      icon: "arrow-left-line",
-      scheme: :secondary,
-      href: solidus_admin.products_path
-    ) %>
-    <h1 class="flex items-center gap-2">
-      <span class="body-title"><%= @product.name %></span>
+<%= page do %>
+  <%= page_header do %>
+    <%= page_header_back(solidus_admin.products_path) %>
+    <%= page_header_title(@product.name) do %>
       <%= render component("products/status").from_product(@product) %>
-    </h1>
-
-    <div class="ml-auto flex gap-2 items-center">
-      <%= render component("feedback").new %>
+    <% end %>
+    <%= page_header_actions do %>
       <%= render component("ui/button").new(
         tag: :a,
         text: t(".duplicate"),
@@ -29,12 +20,12 @@
         scheme: :ghost
       ) %>
       <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
-    </div>
-  </header>
+    <% end %>
+  <% end %>
 
   <%= form_for @product, url: solidus_admin.product_path(@product), html: { id: form_id } do |f| %>
-    <div class="flex gap-4 items-start pb-4">
-      <div class="justify-center items-start gap-4 flex flex-col w-full">
+    <%= page_with_sidebar do %>
+      <%= page_with_sidebar_main do %>
         <%= render component('ui/panel').new do %>
           <%= render component("ui/forms/field").text_field(f, :name) %>
           <%= render component("ui/forms/field").text_field(f, :slug) %>
@@ -105,9 +96,9 @@
             href: spree.admin_product_product_properties_path(@product)
           ) %>
         <% end %>
-      </div>
+      <% end %>
 
-      <aside class="justify-center items-start gap-4 flex flex-col w-full max-w-sm">
+      <%= page_with_sidebar_aside do %>
         <%= render component('ui/panel').new(title: "Publishing") do %>
           <%= render component("ui/forms/field").text_field(f, :available_on, tip: t(".hints.available_on_html"), type: :date) %>
           <%= render component("ui/forms/field").text_field(f, :discontinue_on, tip: t(".hints.discontinue_on_html"), type: :date) %>
@@ -125,12 +116,12 @@
         <%= render component('ui/panel').new(title: "Product organization") do %>
           <%= render component("ui/forms/field").select(f, :taxon_ids, taxon_options, multiple: true, "size" => taxon_options.size) %>
         <% end %>
-      </aside>
-    </div>
+      <% end %>
+    <% end %>
   <% end %>
 
-  <div class="mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex">
-    <div class="flex gap-2 grow">
+  <%= page_footer do %>
+    <%= page_footer_actions do %>
       <%= form_for @product, url: solidus_admin.product_path(@product), method: :delete do %>
         <%= render component("ui/button").new(
           tag: :button,
@@ -140,7 +131,7 @@
           "data-#{stimulus_id}-message-param": t(".delete_confirmation"),
         ) %>
       <% end %>
-    </div>
+    <% end %>
     <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
-  </div>
-</div>
+  <% end %>
+<% end %>

admin/app/components/solidus_admin/products/show/component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::Products::Show::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
   def initialize(product:)
     @product = product
   end