From 48e60d776a58f9739c4bede84f2f76871f4a7366 Mon Sep 17 00:00:00 2001
From: Craig Tweedy <ahoy@craigtweedy.co.uk>
Date: Wed, 10 Feb 2021 00:19:50 +0000
Subject: [PATCH] Added related products

---
 .../product/listing/ProductListing.tsx        | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/product/listing/ProductListing.tsx b/src/components/product/listing/ProductListing.tsx
index ec61058..690a725 100644
--- a/src/components/product/listing/ProductListing.tsx
+++ b/src/components/product/listing/ProductListing.tsx
@@ -1,4 +1,5 @@
 import { IonCard, IonCol, IonGrid, IonRow } from "@ionic/react";
+import ProductCard from "../product-card/ProductCard";
 import ProductDescription from "./description/ProductDescription";
 import "./ProductListing.css";
 
@@ -33,7 +34,7 @@ const ProductListing: React.FC<ProductListingProps> = ({ product }) => {
                 );
               })}
             </IonRow>
-            <IonRow className="meta">
+            <IonRow className="meta ion-hide-md-down">
               {(meta.attributes || []).map((fileName) => {
                 return (
                   <IonCol
@@ -57,6 +58,31 @@ const ProductListing: React.FC<ProductListingProps> = ({ product }) => {
           <ProductDescription product={product} />
         </IonCol>
       </IonRow>
+      <IonRow>
+        <IonCol>
+          <IonGrid>
+            <IonRow>
+              <h3>Some other things you might like</h3>
+            </IonRow>
+            <IonRow>
+              {related_products.map((related_product) => {
+                return (
+                  <IonCol
+                    size="12"
+                    sizeSm="6"
+                    sizeMd="6"
+                    sizeLg="3"
+                    sizeXl="3"
+                    key={related_product.id}
+                  >
+                    <ProductCard product={related_product} />
+                  </IonCol>
+                );
+              })}
+            </IonRow>
+          </IonGrid>
+        </IonCol>
+      </IonRow>
     </IonGrid>
   );
 };