refactor: extract product_grid to shared ShopComponents module

Create a reusable product grid component that handles responsive
column layouts. Supports two modes:

- Theme-based columns: Uses theme_settings.grid_columns for lg breakpoint
- Fixed columns: Use columns={:fixed_4} for 2/4 column layouts

Used in: home (featured), collection, pdp (related), error (suggestions)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex

@@ -52,25 +52,17 @@
     </div>
 
     <!-- Product Grid -->
-    <div class={[
-          "product-grid grid grid-cols-1 sm:grid-cols-2",
-          case @theme_settings.grid_columns do
-            "2" -> "lg:grid-cols-2"
-            "3" -> "lg:grid-cols-3"
-            "4" -> "lg:grid-cols-4"
-            _ -> "lg:grid-cols-3"
-          end
-        ]}>
-          <%= for product <- @preview_data.products do %>
-            <.product_card
-              product={product}
-              theme_settings={@theme_settings}
-              mode={:preview}
-              variant={:default}
-              show_category={true}
-            />
-          <% end %>
-        </div>
+    <.product_grid theme_settings={@theme_settings}>
+      <%= for product <- @preview_data.products do %>
+        <.product_card
+          product={product}
+          theme_settings={@theme_settings}
+          mode={:preview}
+          variant={:default}
+          show_category={true}
+        />
+      <% end %>
+    </.product_grid>
   </div>
   </main>
 

lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

@@ -40,7 +40,7 @@
       </button>
     </div>
 
-    <div class="product-grid mt-12 grid gap-4 grid-cols-2 md:grid-cols-4 max-w-xl mx-auto">
+    <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto">
       <%= for product <- Enum.take(@preview_data.products, 4) do %>
         <.product_card
           product={product}
@@ -49,7 +49,7 @@
           variant={:minimal}
         />
       <% end %>
-    </div>
+    </.product_grid>
     </div>
   </main>
 

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -52,15 +52,7 @@
       Featured products
     </h2>
 
-    <div class={[
-      "product-grid grid grid-cols-1 sm:grid-cols-2",
-      case @theme_settings.grid_columns do
-        "2" -> "lg:grid-cols-2"
-        "3" -> "lg:grid-cols-3"
-        "4" -> "lg:grid-cols-4"
-        _ -> "lg:grid-cols-3"
-      end
-    ]}>
+    <.product_grid theme_settings={@theme_settings}>
       <%= for product <- Enum.take(@preview_data.products, 4) do %>
         <.product_card
           product={product}
@@ -69,7 +61,7 @@
           variant={:featured}
         />
       <% end %>
-    </div>
+    </.product_grid>
 
     <div class="text-center mt-8">
       <button

lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex

@@ -402,7 +402,7 @@
           You might also like
         </h2>
 
-        <div class="product-grid grid gap-6 grid-cols-2 md:grid-cols-4">
+        <.product_grid columns={:fixed_4} gap="gap-6">
           <%= for related_product <- Enum.slice(@preview_data.products, 1, 4) do %>
             <.product_card
               product={related_product}
@@ -411,7 +411,7 @@
               variant={:compact}
             />
           <% end %>
-        </div>
+        </.product_grid>
       </div>
     <% end %>
   </main>