Extract a thumbnail component from product images

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

@@ -75,7 +75,7 @@ def image_column
         image = product.gallery.images.first or return
 
         link_to(
-          image_tag(image.url(:small), class: 'h-10 w-10 max-w-min rounded border border-gray-100', alt: product.name),
+          render(component('ui/thumbnail').new(src: image.url(:small), alt: product.name)),
           solidus_admin.product_path(product),
           class: 'inline-flex overflow-hidden',
           tabindex: -1,

admin/app/components/solidus_admin/ui/thumbnail/component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Thumbnail::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: 'h-6 w-6',
+    m: 'h-10 w-10',
+    l: 'h-20 w-20',
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    tag.div(
+      tag.img(
+        **@attributes,
+        class: "object-contain h-full w-full",
+      ),
+      class: "
+        #{SIZES[@size]}
+        rounded border border-gray-100
+        bg-white overflow-hidden
+        #{@attributes[:class]}
+      "
+    )
+  end
+end

admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# @component "ui/thumbnail"
+class SolidusAdmin::UI::Thumbnail::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param size select { choices: [s, m, l] }
+  # @param src text
+  def playground(size: :m, src: "https://picsum.photos/200/300")
+    render component("ui/thumbnail").new(size: size.to_sym, src: src)
+  end
+end

admin/spec/components/previews/solidus_admin/ui/thumbnail/component_preview/overview.html.erb

@@ -0,0 +1,45 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Empty
+  </h6>
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size) %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Square
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/200/200") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/20/20") %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Portrait
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/200/286") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/20/28") %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Landscape
+  </h6>
+
+  <% current_component::SIZES.keys.each do |size| %>
+    (size: <%= size.inspect %>)
+    <%= render current_component.new(size: size, src: "https://placekitten.com/280/200") %>
+    <%= render current_component.new(size: size, src: "https://placekitten.com/28/20") %>
+  <% end %>
+</div>

admin/spec/components/solidus_admin/ui/thumbnail/component_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Thumbnail::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end